/* ================================================
Template Name: APPAI 
Description: Creative App Landing HTML5 Template
Template URI: https://themeforest.net/item/appai-creative-app-landing-html5-template/19533013
Author: Marvel_Theme
Author URI: https://themeforest.net/user/marvel_theme
Version: 1.1.0

=== CSS INDEX ===
1. THEME DEFAULT CSS
    1.1. TRANSITION
    1.2. BASIC MARGIN PADDING
    1.3. PAGE SECTION PADDING
    1.4. PAGE SECTION MARGIN
    1.5. BACKGROUND
    1.6. OVERLAY
    1.7. SECTION HEADDING STYLE
    1.8. SECTION HEADDING STYLE 2
2. HEADER AREA
    2.1. HEADER HOME STYLE 2
    2.2. BLOG PAGE HEADER STYLE
3. SLIDER AREA
    3.1. SLIDER HOME STYLE 2
    3.2. SLIDER HOME STYLE 3
4. APP FEATURES AREA
    4.1. APP FEATURES AREA HOME STYLE 2
5. APP ABOUT AREA
6. HOW IT WORKS AREA
    6.1. HOW IT WORKS AREA HOME STYLE 2
7. AWESOME FEATURES AREA
8. PROMO VIDEO AREA
9. FUN FACT AREA
10. APP SCREENSHOTS AREA
11. TEAM AREA
12. TESTIMONIAL AREA
    12.1. TESTIMONIAL AREA HOME STYLE 2
13. PRICING TABLE AREA
14. FAQ AREA
    14.1. FAQ AREA HOME STYLE 2
15. APP DOWNLOAD AREA
    15.1. APP DOWNLOAD AREA HOME STYLE 2
16. BLOG AREA
17. SUBSCRIBE AREA
18. CONTACT AREA
19. FOOTER AREA
    19.1. FOOTER AREA HOME STYLE 2
20. BLOG TWO COLUMNS
    20.1. BREADCRUMB
    20.2. BLOG
    20.3. PAGINATION 
21. BLOG LEFT SIDEBAR
22. BLOG DETAILS
    22.1. SOCIAL SHARE AND TAGS
    22.2. POST COMMENTS AREA
    22.3. POST NEW COMMENT
    22.4. RELATED POST AREA
23. COMMING SOON PAGE
    23.1. COMMING SOON SUBSCRIBE AREA
24. HOME PAGE 3 STYLE
25. HOME PAGE 4 STYLE
26. HOME PAGE 5 STYLE
27. HOME PAGE 6 STYLE
28. HOME PAGE 7 STYLE
29. HOME PAGE 8 STYLE
30. HOME PAGE 9 STYLE
31. HOME PAGE 10 STYLE
32. HOME PAGE 11 STYLE
================================================ */


/* =====================================
1. THEME DEFAULT CSS
======================================== */

/*--------------------------------
IMPORT FONTS AND FACE FONTS
----------------------------------*/

@font-face {
    font-family: 'viphakm';
    font-style: normal;
    font-weight: normal;
    src: url(css/vip-hakm-bold.ttf);
}


/*--------------------------------
IMPORT FONTS END
----------------------------------*/

body {
    color: #4c5462;
    font-family: "viphakm", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
}
@media (min-width:1200px) {
    .container {
        width: 1200px
    }
}
.img {
    max-width: 100%;
}
a:focus, .btn:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
a:focus, a:hover, a:active {
    color: #4c5462;
    text-decoration: none;
}
a, button {
    outline: medium none;
    color: #4c5462;
    text-decoration: none;
    display: inline-block;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "viphakm", sans-serif;
    color: #4c5462;
    margin-top: 0px;
    font-style: normal;
    font-weight: 700;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
}
h1 {
    font-size: 48px;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 24px;
    color: #5e5e5c;
}
h4 {
    font-size: 20px;
    color: #5e5e5c;
    font-weight: 600;
}
h5 {
    font-size: 18px;
    color: #5e5e5c;
    font-weight: 600;
}
h6 {
    font-size: 16px;
}
ul {
    margin: 0px;
    padding: 0px;
}
li {
    list-style: none
}
p {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #4c5462;
    margin-bottom: 15px;
}
hr {
    margin: 60px 0;
    padding: 0px;
    border-bottom: 1px solid #eceff8;
    border-top: 0px;
}
label {
    color: #626262;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}
blockquote {
    background-color: #f6f6f6;
    border: 0 none;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin: 60px 0 30px 30px;
    padding: 30px;
}
*::-moz-selection {
    background: #4fc1f0;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background: #4fc1f0;
    color: #fff;
    text-shadow: none;
}
*::-moz-placeholder {
    color: #4c5462;
    font-size: 14px;
}
*::-webkit-input-placeholder {
    color: #4c5462;
    font-size: 14px;
}
*:-ms-input-placeholder {
    color: #4c5462;
    font-size: 14px;
}
.fix {
    overflow: hidden;
}
.media-left {
    padding-left: 30px;
    float: right;
}
.dsp-tc {
    display: table-cell;
    vertical-align: top;
}
.btn {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border: 0 none;
    border-radius: 100px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    outline: 0 none;
    padding: 13px 30px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 1;
}
.btn:hover,
.btn:focus,
.btn:active {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    color: #fff;
    outline: 0 none;
    border: 0 none;
    text-decoration: none;
}
.btn:active {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
.btn.btn-bordered-white {
    background: transparent none repeat scroll 0 0;
    border: 2px solid #fff;
    padding: 11px 30px;
}

.btn.btn-bordered-white:hover,
.btn.btn-bordered-white:focus {
    border-color: transparent;
    outline: 0 none;
}

.btn.btn-bordered-white:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 100px;
    content: "";
    height: calc(100% + 4px);
    left: -2px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: -2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(100% + 4px);
    z-index: -1;
}
.btn.btn-bordered-white:hover:after,
.btn.btn-bordered-white:focus:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.btn.btn-bordered-grad {
    background: transparent none repeat scroll 0 0;
    color: #5e5e5c;
}

.btn.btn-bordered-grad:hover,
.btn.btn-bordered-grad:focus {
    color: #fff;
}
.btn.btn-bordered-grad:before {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 100px;
    content: "";
    height: calc(100% + 4px);
    left: -2px;
    position: absolute;
    top: -2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(100% + 4px);
    z-index: -2;
}
.btn.btn-bordered-grad:after {
    background: #fff none repeat scroll 0 0;
    border-radius: 100px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}
.btn.btn-bordered-grad:hover:after,
.btn.btn-bordered-grad:focus:after {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.button-group a {
    margin-left: 30px;
}
.button-group a:last-child {
    margin-left: 0;
}

.header-space {
    margin-top: 120px;
}

/* =====================================
1.1. TRANSITION
===================================== */

.transition-3s {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
a, .btn, img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* =====================================
1.2. BASIC MARGIN PADDING
===================================== */

.m-0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.p-0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* =====================================
MARGIN TOP
===================================== */

.mt-0 {
    margin-top: 0;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-60 {
    margin-top: 60px;
}
.mt-70 {
    margin-top: 70px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-90 {
    margin-top: 90px;
}
.mt-100 {
    margin-top: 100px;
}
.mt-110 {
    margin-top: 110px;
}
.mt-120 {
    margin-top: 120px;
}
.mt-130 {
    margin-top: 130px;
}
.mt-140 {
    margin-top: 140px;
}
.mt-150 {
    margin-top: 150px;
}

/* =====================================
MARGIN BOTTOM
===================================== */

.mb-0 {
    margin-bottom: 0;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-60 {
    margin-bottom: 60px;
}
.mb-70 {
    margin-bottom: 70px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-90 {
    margin-bottom: 90px;
}
.mb-100 {
    margin-bottom: 100px;
}
.mb-110 {
    margin-bottom: 110px;
}
.mb-120 {
    margin-bottom: 120px;
}
.mb-130 {
    margin-bottom: 130px;
}
.mb-140 {
    margin-bottom: 140px;
}
.mb-150 {
    margin-bottom: 150px;
}

/*===================================== 
PADDING TOP
===================================== */

.pt-0 {
    padding-top: 0;
}
.pt-10 {
    padding-top: 10px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-70 {
    padding-top: 70px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-90 {
    padding-top: 90px;
}
.pt-100 {
    padding-top: 100px;
}
.pt-110 {
    padding-top: 110px;
}
.pt-120 {
    padding-top: 120px;
}
.pt-130 {
    padding-top: 130px;
}
.pt-140 {
    padding-top: 140px;
}
.pt-150 {
    padding-top: 150px;
}

/* =====================================
PADDING RIGHT
===================================== */

.pr-0 {
    padding-right: 0;
}
.pr-10 {
    padding-right: 10px;
}
.pr-15 {
    padding-right: 15px;
}
.pr-20 {
    padding-right: 20px;
}
.pr-30 {
    padding-right: 30px;
}
.pr-40 {
    padding-right: 40px;
}
.pr-50 {
    padding-right: 50px;
}
.pr-60 {
    padding-right: 60px;
}
.pr-70 {
    padding-right: 70px;
}
.pr-80 {
    padding-right: 80px;
}
.pr-90 {
    padding-right: 90px;
}
.pr-100 {
    padding-right: 100px;
}
.pr-110 {
    padding-right: 110px;
}
.pr-120 {
    padding-right: 120px;
}
.pr-130 {
    padding-right: 130px;
}
.pr-140 {
    padding-right: 140px;
}

/* =====================================
PADDING BOTTOM
===================================== */

.pb-0 {
    padding-bottom: 0;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-110 {
    padding-bottom: 110px;
}
.pb-120 {
    padding-bottom: 120px;
}
.pb-130 {
    padding-bottom: 130px;
}
.pb-140 {
    padding-bottom: 140px;
}
.pb-150 {
    padding-bottom: 150px;
}

/* =====================================
PADDING LEFT
===================================== */

.pl-0 {
    padding-left: 0;
}
.pl-10 {
    padding-left: 10px;
}
.pl-15 {
    padding-left: 15px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-30 {
    padding-left: 30px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-50 {
    padding-left: 50px;
}
.pl-60 {
    padding-left: 60px;
}
.pl-70 {
    padding-left: 70px;
}
.pl-80 {
    padding-left: 80px;
}
.pl-90 {
    padding-left: 90px;
}
.pl-100 {
    padding-left: 100px;
}
.pl-110 {
    padding-left: 110px;
}
.pl-120 {
    padding-left: 120px;
}
.pl-130 {
    padding-left: 130px;
}
.pl-140 {
    padding-left: 140px;
}
.pl-150 {
    padding-left: 150px;
}

/* =====================================
1.3. PAGE SECTION PADDING
===================================== */

.ptb-0 {
    padding: 0;
}
.ptb-10 {
    padding: 10px 0;
}
.ptb-20 {
    padding: 20px 0;
}
.ptb-30 {
    padding: 30px 0;
}
.ptb-40 {
    padding: 40px 0;
}
.ptb-50 {
    padding: 50px 0;
}
.ptb-60 {
    padding: 60px 0;
}
.ptb-70 {
    padding: 70px 0;
}
.ptb-80 {
    padding: 80px 0;
}
.ptb-90 {
    padding: 90px 0;
}
.ptb-100 {
    padding: 100px 0;
}
.ptb-110 {
    padding: 110px 0;
}
.ptb-120 {
    padding: 120px 0;
}
.ptb-130 {
    padding: 130px 0;
}
.ptb-140 {
    padding: 140px 0;
}
.ptb-150 {
    padding: 150px 0;
}
.p-100 {
    padding: 100px;
}

/* =====================================
1.4. PAGE SECTION MARGIN
===================================== */

.mtb-0 {
    margin: 0;
}
.mtb-10 {
    margin: 10px 0;
}
.mtb-15 {
    margin: 15px 0;
}
.mtb-20 {
    margin: 20px 0;
}
.mtb-30 {
    margin: 30px 0;
}
.mtb-40 {
    margin: 40px 0;
}
.mtb-50 {
    margin: 50px 0;
}
.mtb-60 {
    margin: 60px 0;
}
.mtb-70 {
    margin: 70px 0;
}
.mtb-80 {
    margin: 80px 0;
}
.mtb-90 {
    margin: 90px 0;
}
.mtb-100 {
    margin: 100px 0;
}
.mtb-110 {
    margin: 110px 0;
}
.mtb-120 {
    margin: 120px 0;
}
.mtb-130 {
    margin: 130px 0;
}
.mtb-140 {
    margin: 140px 0;
}
.mtb-150 {
    margin: 150px 0;
}

/* =====================================
1.5. BACKGROUND
===================================== */

.gray-bg {
    background-color: #f5f7fb;
}
.blue-grad-bg {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
.blue-grad-bg-2 {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
}

/* =====================================
1.6. OVERLAY
===================================== */

.overlay-white,
.overlay-dark,
.overlay-grad-one, 
.overlay-grad-two  {
    position: relative;
    z-index: 0;
}
.overlay-white:after {
    background-color: rgba(245, 247, 251, 1);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
.overlay-dark:after {
    background-color: rgba(39, 45, 58, 1);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
.overlay-grad-one:after, .overlay-grad-two:after {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
.overlay-grad-one:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
.overlay-grad-three {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}
/* =====================================
1.7. SECTION HEADDING STYLE
===================================== */

.section-heading {
    margin: 0 auto 80px;
    width: 60%;
}
.section-heading h2 {
    margin-bottom: 25px;
    padding-bottom: 25px;
    position: relative;
    text-transform: uppercase;
}
.section-heading h2:after {
    background: rgba(0, 0, 0, 0) url("img/others/line-shape.png") no-repeat scroll 0 0;
    content: "";
    height: 11px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 73px;
}
.section-heading.white-shape h2:after {
    background: rgba(0, 0, 0, 0) url("img/others/line-shape-white.png") no-repeat scroll 0 0;
}
.section-heading p {
    margin-bottom: 10px;
}

/* =====================================
1.8. SECTION HEADDING STYLE 2
===================================== */

.section-heading.shape-2 h2:after {
    background: rgba(0, 0, 0, 0) url("img/others/line-shape-2.png") no-repeat scroll 0 0;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* =====================================
2. HEADER AREA
===================================== */

header {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}
#navigation {
    padding: 0 15px;
}
.navbar {
    border-radius: 0;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
.navbar.affix-top {
    padding: 30px 0;
}
.navbar.affix {
    box-shadow: 0 0 20px -10px rgba(0,0,0,0.8);
}
.navbar.navbar-fixed-top {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
.navbar-brand > img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.navbar.affix .navbar-brand > img {
    width: 85%;
}
.navbar-nav li a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 20px;
}
.nav>li>a:focus, .nav>li>a:hover, .nav>.active>a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #a1ad6e;
}

/* =====================================
2.1. HEADER HOME STYLE 2
===================================== */

#slider-area.home-style-2 {
    background: rgba(0, 0, 0, 0) url("img/bg/7.jpg") no-repeat scroll center center / cover;
    padding-top: 90px;
}
.home-style-2 .navbar {
    background: #272d3a none repeat scroll 0 0;
}
.home-style-2 .nav > li > a:focus, .home-style-2 .nav > li > a:hover, .home-style-2 .nav > .active > a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ee0f6f;
}

/* =====================================
2.2. BLOG PAGE HEADER STYLE
===================================== */

.navbar.navbar-white, .navbar-white.navbar-fixed-top {
    background: #fff none repeat scroll 0 0;
}
.navbar-white .navbar-nav li a {
    color: #5e5e5c;
}
.navbar-white .nav > li > a:focus, .navbar-white .nav > li > a:hover, .navbar-white .nav > .active > a {
    color: #a1ad6e
}
.navbar-white .navbar-toggle .icon-bar {
    background-color: #a1ad6e;
}

/* =====================================
3. SLIDER AREA
===================================== */

#slider-area {
  overflow: hidden;
}

#slider-area.home-style-1 {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    padding-top: 90px;
    position: relative;
}
#slider-area.home-style-1:after {
    border-left: 50vw solid #fff;
    border-top: 160px solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
    z-index: 1;
}
#slider-area.home-style-1:before {
    border-right: 50vw solid #fff;
    border-top: 160px solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    width: 0;
    z-index: 0;
}
.slide .container {
    position: relative;
}
.slider-text {
    padding-bottom: 25em;
    padding-top: 15em;
    width: 71%;
}
.slider-text h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 100;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.slider-text p {
    color: #fff;
    font-size: 16px;
    width: 86%;
}
.button-group .btn-white {
    font-size: 16px;
}
.button-group .download-btn {
    margin-right: 30px;
}
.button-group {
    margin-top: 45px;
}
#slider-area .slider-image {
    position: absolute;
    right: -130px;
    top: 70px;
    z-index: 1;
}
.slider-image img {
    width: 100%;
}
.scroll-icon {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}
.scroll-icon a {
    display: inline-block;
    margin-bottom: 30px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.scroll-icon a i {
    color: #fff;
    font-size: 48px;
}

/* ====================================
3.1. SLIDER HOME STYLE 2
==================================== */

.promo-header-area {
    margin: 150px auto 0;
    width: 67%;
}
.promo-header-area h2 {
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
}
.promo-header-area h1 {
    color: #fff;
    font-size: 72px;
    font-weight: 600;
    text-transform: uppercase;
}
.promo-header-area p {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 30px;
}

.promo-header-area .btn.btn-style-2:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.swiper-container.one {
    padding-top: 40px;
}
.promo-header-area .swiper-slide {
    padding: 0 43px;
}

/* =====================================
3.2. SLIDER HOME STYLE 3
===================================== */

#slider-area.home-style-3 {
    padding-top: 90px;
}
.home-style-3 .slider-text > h1 {
    font-size: 60px;
}
.slider-text span {
    font-weight: 300;
}

/* =====================================
4. APP FEATURES AREA
===================================== */

.single-feature {
    padding: 30px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.single-feature:hover {
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.single-feature:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.single-feature:hover:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.feature-icon img {
    margin-top: 10px;
}
.feature-details p {
    margin-bottom: 0;
}

/* =====================================
4.1. APP FEATURES AREA HOME STYLE 2
===================================== */

#app-features-area.home-style-2 {
    padding-top: 40px;
}
.single-feature.feature-style-2 {
    padding: 50px 30px;
    text-align: center;
}
.feature-style-2 .feature-icon {
    margin-bottom: 30px;
    min-height: 50px;
}
.feature-style-2 .feature-icon img {
    margin-top: 0;
}

/* =====================================
5. APP ABOUT AREA
===================================== */

#app-about-area .section-heading {
    margin-bottom: 0;
}
.about-app h3 {
    margin-bottom: 30px;
}
.about-app p {
    margin-bottom: 35px;
}
.store-buttons {
    margin-top: 50px;
}
.store-buttons a {
    text-align: left;
}
.store-buttons a i, .store-buttons a p {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.about-app .store-buttons a:hover i, .about-app .store-buttons a:hover p {
    color: #fff;
}
.store-buttons a p {
    line-height: 1.2;
    text-align: right;
}
.store-buttons i {
    color: #fff;
    font-size: 24px;
    padding-left: 10px;
    vertical-align: middle;
}
.about-app .store-buttons i {
    color: #5e5e5c;
}
.store-buttons span {
    font-size: 18px;
    font-weight: 700;
}
.about-app-mockup img {
    margin-left: auto;
}
.gray-bg .btn.btn-bordered-grad:after {
    background: #f5f7fb none repeat scroll 0 0;
}

/* =====================================
6. HOW IT WORKS AREA
===================================== */

#how-it-works-area .section-heading {
    margin-bottom: 50px;
}
.hiw-feature {
    padding: 30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.hiw-feature:hover {
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.hiw-feature-content {
    position: relative;
}
.hiw-mockup {
    left: 0;
    position: absolute;
    right: 0;
    top: 45px;
}
.hiw-feature-icon img {
    margin-top: 15px;
}
.hiw-feature-details h5 {
    text-transform: uppercase;
}
.hiw-feature-details p {
    margin-bottom: 0;
}

/* =====================================
6.1. HOW IT WORKS AREA HOME STYLE 2
===================================== */

.hiw-feature-content.style-2 {
    margin-top: 50px;
}
.hiw-mockup.style-2 {
    top: -20px;
}

/* =====================================
7. AWESOME FEATURES AREA
===================================== */

#awesome-features-area {
    background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center / cover;
}
#awesome-features-area .section-heading {
    margin-bottom: 0;
}
#awesome-features-area .awesome-feature {
    margin-top: 80px;
}
#awesome-features-area .media-left {
    padding-right: 20px;
}
.awesome-feature-icon span {
    display: block;
    height: 60px;
    margin-left: 10px;
    position: relative;
    width: 60px;
}
.awesome-feature-icon span:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 50px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
.awesome-feature-icon i {
    background-color: #f5f7fa;
    border-radius: 60px;
    color: #4c5462;
    display: inline-block;
    font-size: 24px;
    height: calc(100% - 2px);
    left: 1px;
    line-height: 58px;
    position: relative;
    text-align: center;
    top: 1px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(100% - 2px);
    z-index: 1;
}
.awesome-feature:hover .awesome-feature-icon i {
    background: transparent;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    color: #fff;
}
.asesome-feature-details h5 {
    font-weight: 700;
    text-transform: uppercase;
}

/* =====================================
8. PROMO VIDEO AREA
===================================== */

#promo-video-area {
    position: relative;
    top: 120px;
    z-index: 2;
}
.video-demo-image {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
    display: inline-block;
    left: 50%;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#promo-video-area .overlay-grad-one:after {
    z-index: 1;
}
#promo-video-area .overlay-grad-two:after {
    z-index: 1;
}
.video-play-icon {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.video-play-icon i {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 80px;
    color: #fff;
    display: inline-block;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 80px;
}

/* =====================================
9. FUN FACT AREA
===================================== */

#fun-fact-area {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;
    padding: 220px 0 100px;
}
.single-fact i {
    color: #fff;
    display: inline-block;
    font-size: 48px;
    margin-bottom: 28px;
}
.single-fact h5 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}
.single-fact h2 {
    color: #fff;
    font-size: 30px;
}

/* =====================================
10. APP SCREENSHOTS AREA
===================================== */

.slider-wrapper-2 .slide {
    margin: 0 15px;
}
.slider-wrapper-2 .slider-image {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin: 5px 0 10px;
    position: relative;
}
.slider-wrapper-2 .slider-image:hover .preview-icon {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.preview-icon {
    background-color: rgba(0, 0, 0, 0.85);
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
    margin: 0 auto;
}
.preview-icon i {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 70px;
    color: #fff;
    font-size: 30px;
    height: 70px;
    left: 0;
    line-height: 70px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 70px;
}
.slider-wrapper-2.slick-dotted.slick-slider {
    margin-bottom: 60px;
}
.slick-dots li {
    border: 1px solid #a1ad6e;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    height: 12px;
    margin: 0 5px;
    padding: 0;
    position: relative;
    width: 12px;
}
.slick-dots li.slick-active {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border: medium none;
}
.slick-dots li button {
    display: none;
}
.slick-dots {
    bottom: 70px;
}
#app-screenshot-area .slick-dots {
    bottom: -70px;
}
.swiper-container {
    width: 100%;
    padding-bottom: 60px;
}
.swiper-slide {
    width: 390px;
    height: auto;
    padding: 0 15px;
}
.swiper-slide img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.swiper-slide .slider-image .preview-icon {
    z-index: -1;
    width: calc(100% - 30px);
}
.swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}
.swiper-pagination-bullet {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #ee0f6f;
    border-radius: 100%;
    display: inline-block;
    height: 12px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    width: 12px;
}
.swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
    border: medium none;
    height: 12px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    width: 12px;
}

/* =====================================
11. TEAM AREA
===================================== */

#team-area {
    background: rgba(0, 0, 0, 0) url("img/bg/3.jpg") no-repeat scroll center center / cover;
}
#team-area .section-heading h2, #team-area .section-heading p {
    color: #fff;
}
.single-member {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    position: relative;
}
.member-description {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, rgba(161, 173, 110, 0.95) 0%, rgba(94, 94, 92, 0.95) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(161, 173, 110, 0.95) 0%, rgba(94, 94, 92, 0.95) 100%) repeat scroll 0 0;
    height: 100%;
    left: 15px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: 0;
    top: 15px;
    width: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.single-member:hover .member-description {
    left: 30px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 30px;
}
.member-description-inner {
    left: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.member-name {
    margin-bottom: 5px;
}
.designation {
    color: #fff;
    font-weight: 600;
}
.short-description {
    color: #fff;
}
.social {
    margin: 0;
}
.social a {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 100px;
    color: #5e5e5c;
    display: inline-block;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 35px;
    z-index: 1;
}
.social a:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 100px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}
.social a:hover:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.social a:hover {
    color: #fff;
}
.social i {
    position: relative;
    z-index: 1;
}


/* =====================================
12. TESTIMONIAL AREA
===================================== */

#testimonial-area .slick-dotted.slick-slider {
    margin-bottom: 0;
}
#testimonial-area .slider-content {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
    margin: 50px 0 30px;
    padding: 60px;
    position: relative;
}
#testimonial-area .slider-content:before {
    background: rgba(0, 0, 0, 0) url("./img/others/quote-icon.png") no-repeat scroll 0 0;
    content: "";
    height: 50px;
    left: 70px;
    position: absolute;
    top: 70px;
    width: 50px;
    z-index: 1;
}
.client-image img {
    border: 2px solid #dddddd;
}
.client-image {
    left: 0;
    position: absolute;
    right: 0;
    top: -50px;
    width: 100px;
    margin: 0 auto;
}
.client-testimonial {
    margin-bottom: 20px;
}
.home-style-2 .client-testimonial {
    margin-bottom: 0;
}
.client-testimonial h3 {
    margin-bottom: 0;
    margin-top: 20px;
}
.client-review {
    margin-bottom: 0;
    margin-top: 20px;
}
#testimonial-area.home-style-2 .slick-dots {
    bottom: -30px;
}

/* =====================================
12.1. TESTIMONIAL AREA HOME STYLE 2
===================================== */

.testimonial-slider-2 .slide {
    padding: 0 40px;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.testimonial-slider-2 .slide.slick-active {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.testimonial-slider-2 .slick-prev, .testimonial-slider-2 .slick-next {
    height: 50px;
    line-height: 50px;
    width: 50px;
    z-index: 5;
}
.testimonial-slider-2 .slick-prev {
    left: 170px;
}
.testimonial-slider-2 .slick-next {
    right: 170px;
}
.testimonial-slider-2 .slick-prev:before {
    content: "\eb8a";
}
.testimonial-slider-2 .slick-next:before {
    content: "\eb8b";
}
.testimonial-slider-2 .slick-prev:before, .testimonial-slider-2 .slick-next:before {
    color: #ee0f6f;
    font-family: "icofont";
    font-size: 48px;
    line-height: 1;
    opacity: 0.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

/* =====================================
13. PRICING TABLE AREA
===================================== */

#pricing-table-area {
    background: rgba(0, 0, 0, 0) url("img/bg/4.jpg") no-repeat scroll center center / cover;
}
.single-price-table {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.single-price-table:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.doller-sign {
    font-size: 18px;
    bottom: 0;
}
.duration {
    color: #4c5462;
    font-size: 12px;
    font-weight: 400;
    bottom: 0;
    text-transform: capitalize;
}
.plan-title {
    color: #fff;
    font-weight: 700;
    letter-spacing: 5px;
    margin: 0;
    padding: 20px 0;
}
.price-value {
    margin: 0;
    padding: 20px 0;
}
.pricing-content {
    padding: 40px 0;
}
.table-content li {
    color: #4c5462;
    margin-bottom: 15px;
}
.table-content li:last-child {
    margin-bottom: 0;
}
.pricing-footer {
    padding: 20px 0 30px;
    position: relative;
    z-index: 1;
}
.pricing-footer .btn-grad:before {
  background: #fff none repeat scroll 0 0;
}
.pricing-footer .btn-grad:hover:before {
    background: transparent none repeat scroll 0 0;
}
.pricing-footer .btn {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.pricing-footer a:hover {
    color: #000;
}
.pricing-footer:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.pricing-footer:before {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
}
.single-price-table:hover .pricing-footer:before {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.single-price-table:hover .btn.btn-bordered-grad:after {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.single-price-table:hover .price-value {
    color: #a1ad6e;
}
.single-price-table:hover .pricing-footer p, .single-price-table:hover .pricing-footer a {
    color: #fff;
}

/* =====================================
14. FAQ AREA
===================================== */

.faq-content-wrapper {
    position: relative;
}
.faq-content-wrapper:before {
    background-color: #5e5e5c;
    content: "";
    height: calc(100% - 60px);
    left: -40px;
    position: absolute;
    top: 30px;
    width: 1px;
}
.panel-heading:before {
    background-color: #fff;
    border: 1px solid;
    border-radius: 50px;
    content: "";
    height: 15px;
    left: -48px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 15px;
}
.faq-right-img-mockup {
    right: -200px;
    position: absolute;
}
.panel-group {
    margin: 0;
}
#accordion.panel-group .panel {
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin-top: 30px;
    position: relative;
}
.panel:before {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: -2px;
    position: absolute;
    top: 0;
    width: 2px;
}
#accordion .panel:first-child {
    margin-top: 0;
}
.panel-group .panel-body {
    border: 0 none;
    padding: 0 30px 10px;
}
#accordion .panel-body {
    border: 0 none;
}
.panel-heading {
    border: 0 none;
    border-radius: 0;
    margin: 0;
    padding: 20px 30px;
    position: relative;
}
.panel-title {
    color: #4c5462;
    font-size: 18px;
}
.panel-title a {
    color: inherit;
    display: block;
    position: relative;
}
.panel-title a.collapsed:after {
    content: "\f0a5";
}
.panel-title a:after {
    border: 1px solid #a1ad6e;
    border-radius: 50px;
    color: #a1ad6e;
    content: "";
    font-family: Icofont;
    font-size: 12px;
    font-weight: normal;
    height: 22px;
    line-height: 20px;
    position: absolute;
    left: -12px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 22px;
}

/* =====================================
14.1. FAQ AREA HOME STYLE 2
===================================== */

.faq-home-2 .faq-right-img-mockup {
    left: auto;
    right: -70px;
}

/* =====================================
15. APP DOWNLOAD AREA
===================================== */

.download-app h1 {
    margin-bottom: 15px;
}
#app-download-area {
    position: relative;
}
#app-download-area:after {
    background: rgba(0, 0, 0, 0) url("img/mockups/download-app-mockup.png") no-repeat scroll left bottom;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}
.download-app {
    position: relative;
    z-index: 1;
}
.download-app h1, .download-app p {
    color: #fff;
}
.download-app h1 {
    margin-bottom: 15px;
}

/* =====================================
15.1. APP DOWNLOAD AREA HOME STYLE 2
===================================== */

#app-download-area.home-style-2:after {
    background: rgba(0, 0, 0, 0) url("img/mockups/download-app-mockup-2.png") no-repeat scroll right bottom;
}

/* =====================================
16. BLOG AREA
===================================== */

.post-content {
    margin-top: 10px;
}
.meta-info {
    margin-bottom: 15px;
}
.post-title {
    color: #5e5e5c;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: capitalize;
}
.post-title a:hover {
    color: #a1ad6e;
}
.read-more-wrapper {
    margin-top: 30px;
}
.post-content .read-more-btn {
    color: #5e5e5c;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
}
.post-content .read-more-btn:hover {
    color: #a1ad6e;
}
.meta-info li, .meta-info li a {
    color: #757575;
}
.meta-info a:hover {
    color: #a1ad6e;
}
.read-more-btn i {
    color: inherit;
    font-size: 24px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    right: -20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.read-more-btn:hover i {
    color: #a1ad6e;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    right: -25px;
}

/* =====================================
17. SUBSCRIBE AREA
===================================== */

.subscribe-wrapper {
    background-color: #a1ad6e;
    padding: 40px 100px;
}
.subscribe-text h2 {
    color: #fff;
    margin-right: 20px;
    padding-top: 17px;
    text-align: left;
    text-transform: uppercase;
}
.subscribe-box {
    position: relative;
}
.subscribe-box .form-control {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    box-shadow: none;
    color: #4c5462;
    font-size: 18px;
    height: 65px;
    padding: 0 50px 0 158px;
    text-align: right;
}
.subscribe-box .form-control::-moz-placeholder {
    color: #4c5462;
    font-size: 18px;
}
.subscribe-box button {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border: medium none;
    border-radius: 100px;
    color: #fff;
    font-size: 36px;
    height: 65px;
    padding: 0 60px;
    position: absolute;
    left: 0;
    top: 0;
}

/* =====================================
18. CONTACT AREA
===================================== */

#contact-area {
    position: relative;
}
#map {
    width: 100%;
    height: 660px;
}
.contact-box {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
}
.contact-box-inner {
    background-color: #a1ad6e;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}
.contact-box-inner .address-box {
    background-color: #a1ad6e;
    padding-right: calc(100px - 30px);
}
.get-in-touch {
    background-color: #fff;
}
.get-in-touch h2 {
    text-transform: capitalize;
}
.get-in-touch form {
    margin-top: 30px;
    position: relative;
}
.form-group {
    position: relative;
}
.form-grad-border {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.get-in-touch .form-control:focus + .form-grad-border {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.get-in-touch .form-control {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #e5e5e5;
    -o-border-image: none;
    border-image: none;
    border-radius: 0;
    border-style: none none solid;
    border-width: 0 0 1px;
    box-shadow: none;
    color: #5e5e5c;
    height: auto;
    margin-bottom: 30px;
    padding: 10px 0;
    position: relative;
    text-align: right;
}
.get-in-touch .form-control::-moz-placeholder {
    color: #757575;
}
.get-in-touch .form-control:focus::-moz-placeholder {
    color: #5e5e5c;
}
.get-in-touch textarea {
    resize: vertical;
}
.get-in-touch .btn {
    color: #fff;
    font-size: 12px;
    padding: 15px 30px;
}
.get-in-touch .btn:hover {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.get-in-touch .btn-grad:before {
    display: none;
}
.address-box h2 {
    color: #fff;
    margin-bottom: 25px;
    text-transform: capitalize;
}
.address-box p {
    color: #fff;
}
.address-info {
    margin-top: 40px;
}
.info-icon i {
    border: 1px solid #fff;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    width: 30px;
}
.info-icon {
    padding-right: 10px;
}
.info-details p {
    font-size: 18px;
}
.address-info li {
    margin-bottom: 10px;
}
.appai-form-send-message {
    bottom: -25px;
    left: 0;
    line-height: 1;
    margin: 0;
    position: absolute;
}
.appai-form-send-message.success {
    color: #3c763d;
}
.appai-form-send-message.error {
    color: #a94442;
}

/* =====================================
19. FOOTER AREA
===================================== */

#footer-area {
    background-color: #5e5e5c;
    padding-bottom: 45px;
    padding-top: 23em;
}
#footer-area .social {
    margin-bottom: 25px;
    margin-top: 45px;
}
.copyright p {
    color: #fff;
    margin-bottom: 0;
}
.copyright a {
    color: #a1ad6e;
}

/* =====================================
19.1. FOOTER AREA HOME STYLE 2
===================================== */

.home-style-2 .copyright a {
    color: #ee0f6f;
}

/* =====================================
20. BLOG TWO COLUMNS
===================================== */


/* =====================================
20.1. BREADCRUMB
===================================== */

.breadcrumb-area {
    background: rgba(0, 0, 0, 0) url("img/bg/5.jpg") no-repeat scroll center center / cover;
    position: relative;
}
.breadcrumb-area:before {
    background: rgba(39, 45, 58, 0.75) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.breadcrumb-area h2 {
    color: #fff;
    padding: 110px 0 70px;
    text-align: center;
}
.breadcrumb-nav {
    margin-bottom: 10px;
}
.breadcrumb-nav li a {
    color: #fff;
}
.breadcrumb-nav .active {
    color: #a1ad6e;
}
.breadcrumb-nav li {
    font-weight: 500;
    position: relative;
}
.breadcrumb-nav li:after {
    color: #fff;
    content: "-";
    position: absolute;
    right: -5px;
}
.breadcrumb-nav li:last-child:after {
    display: none;
}

/* =====================================
20.2. BLOG
===================================== */

.home-style-2 .blog-post a:hover, .home-style-2 .post-content .read-more-btn:hover, .home-style-2 .read-more-btn:hover i {
    color: #f89482;
}
.blog-post {
    margin-bottom: 50px;
}
.home-style-1 .blog-post, .home-style-2 .blog-post {
    margin-bottom: 0;
}

/* =====================================
20.3. PAGINATION 
===================================== */

.pagination-nav {
    text-align: center;
}
.pagination-nav li {
    padding: 0 3px;
}
.pagination-nav li a {
    border: 1px solid #858585;
    color: #858585;
    font-family: poppins;
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 35px;
}
.pagination-nav li a:hover, .pagination-nav li a:focus, .pagination-nav li a:focus, .pagination-nav .active a {
    background-color: #a1ad6e;
    border-color: #a1ad6e;
    color: #fff;
}
.pagination-nav i {
    display: inline-block;
    font-size: 18px;
    position: relative;
    top: 2px;
}

/* =====================================
21. BLOG LEFT SIDEBAR
===================================== */

.single-widget {
    margin-bottom: 30px;
}
.widget-content {
    position: relative;
}
.widget-title {
    border-bottom: 1px solid #e5e5e5;
    color: #5e5e5c;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.widget-content.search-widget {
    padding: 0;
}
.search-widget input {
    background-color: #f7f7f7;
    border: medium none;
    color: #5e5e5c;
    height: 45px;
    padding: 10px 45px 10px 15px;
    width: 100%;
}
.search-widget input::-moz-placeholder {
    color: #858585;
    font-size: 12px;
}
.search-widget button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #a1ad6e;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
}
.widget-content a {
    color: #5e5e5c;
    font-weight: 500;
    text-transform: capitalize;
}
.widget-content a:hover, .widget-content a:focus, .widget-content a:active, .widget-content .dropdown li a:hover, .widget-content .dropdown li a:focus, .widget-content .dropdown li a:active {
    border-color: #a1ad6e;
    color: #a1ad6e;
}
.categories-widget li {
    margin-bottom: 15px;
}
.categories-widget .dropdown ul {
    margin-top: 10px;
    -webkit-transition: all 0.1s ease 0s;
    transition: all 0.1s ease 0s;
}
.categories-widget .dropdown li {
    margin-bottom: 0;
}
.categories-widget .dropdown li a {
    color: #4c5462;
    font-size: 12px;
    padding: 5px 10px;
}
.tags-widget a {
    border: 1px solid #e5e5e5;
    color: #4c5462;
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    margin-right: 2px;
    padding: 0 15px;
}
.widget-single-post {
    border-bottom: 1px solid #f7f7f7;
    padding: 20px 0;
}
.widget-single-post:first-child {
    padding-top: 0;
}
.widget-single-post:last-child {
    border-bottom: 0 none;
}
.widget-post-thumb {
    padding-right: 20px;
}
.popular-post-widget p {
    color: #757575;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 10px;
}
.widget-post-content h6 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
}
#instafeed > a {
    float: left;
    padding: 5px;
    width: 33.3333%;
}
#instafeed img {
    max-width: 100%;
}

/* =====================================
22. BLOG DETAILS
===================================== */

.blog-single-post .meta-info {
    margin-bottom: 25px;
}
.blog-single-post p {
    margin-bottom: 25px;
}

/* =====================================
22.1. SOCIAL SHARE AND TAGS
===================================== */

.share-post-wrapper {
    background-color: #f6f6f6;
    margin-top: 30px;
    padding: 15px 30px;
}
.social-share {
    float: left;
}
.social-share li {
    padding: 0;
}
.social-share a {
    color: #c4c4c4;
    font-size: 16px;
    padding: 0 7px;
}
.social-share a:hover {
    color: #a1ad6e;
}
.post-tags {
    float: right;
    padding-left: 20px;
    position: relative;
    text-align: right;
}
.post-tags:before {
    color: #c4c4c4;
    content: "\f0eb";
    font-family: Icofont;
    font-size: 12px;
}
.post-tags > a {
    font-size: 12px;
    margin-right: 2px;
    position: relative;
}
.post-tags > a:hover {
    color: #a1ad6e;
}
.post-tags > a:after {
    content: ",";
    position: absolute;
}
.post-tags > a:last-child:after {
    content: "";
}

/* =====================================
22.2. POST COMMENTS AREA
===================================== */

.post-comments-area {
    margin-top: 80px;
}
.post-comments-area > h5 {
    margin-bottom: 15px;
}
.comment-author {
    font-size: 14px;
    text-transform: uppercase;
}
.comment-time-left {
    font-size: 12px;
    line-height: 1;
}
.post-comments-area .comment-time-left {
    margin-bottom: 15px;
}
.post-comments-area .media-left {
    padding-right: 15px;
}
.post-comments-area .media-body {
    position: relative;
}
.comment-reply {
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 22px;
}
.post-comments-area a:hover {
    color: #a1ad6e;
}
.post-comments-area .media {
    border-bottom: 1px solid #f7f7f7;
    margin: 0;
    padding: 25px 0;
}
.post-comments-area p {
    margin-bottom: 0;
}
.media-list > .media:last-child {
    border-bottom: 0 none;
}
.media-replay .media {
    padding-left: 30px;
}

/* =====================================
22.3. POST NEW COMMENT
===================================== */

.post-new-comment {
    margin-top: 20px;
}
.post-new-comment > h5 {
    margin-bottom: 30px;
}
.post-new-comment .form-control {
    border: 1px solid #e5e5e5;
    border-radius: 0;
    box-shadow: none;
}
.post-new-comment input {
    height: 40px;
}
.post-new-comment .form-group {
    margin-bottom: 25px;
}
.post-new-comment textarea {
    height: 120px;
    resize: vertical;
}
.post-new-comment .btn-grad:before {
    display: none;
}
.post-new-comment .btn {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 15px 30px;
    text-transform: uppercase;
}

/* =====================================
22.4. RELATED POST AREA
===================================== */

.related-posts-area {
    padding-top: 120px;
}
.related-posts-area .blog-post {
    margin-bottom: 0;
}

/* =====================================
23. COMMING SOON PAGE
===================================== */

.comming-soon-wrapper {
    background: rgba(0, 0, 0, 0) url("./img/bg/8.jpg") no-repeat scroll center center / cover;
    position: relative;
    z-index: 1;
}
.ovarlay {
    background-color: #272d3a;
    height: 100%;
    left: 0;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
.count-down-area {
    margin: 0 auto;
    width: 70%;
}
.header-text > h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 300;
    margin-bottom: 70px;
}
.header-text span {
    font-weight: 600;
}
.cdown {
    float: left;
    width: 25%;
}
.cdown span {
    border: 1px solid #a1ad6e;
    display: block;
    margin: 0 40px;
}
.cdown strong {
    color: #fff;
    display: block;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    padding: 20px 0;
}
.cdown p {
    background-color: #a1ad6e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0;
    padding: 10px 0;
    text-transform: uppercase;
}
.comming-soon-wrapper #footer-area {
    background-color: transparent;
    padding-bottom: 50px;
    padding-top: 120px;
}
.comming-soon-wrapper #footer-area .social {
    margin-bottom: 25px;
    margin-top: 0;
    padding-bottom: 0;
}
.comming-soon-wrapper header {
    position: static;
}
.comming-soon-wrapper .logo {
    margin-top: 100px;
}
.counter-area {
    padding: 170px 0 150px;
    text-align: center;
}

/* =====================================
23.1. COMMING SOON SUBSCRIBE AREA
===================================== */

.comming-soon-wrapper .subscribe-wrapper {
    background: transparent none repeat scroll 0 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 50%;
}
.comming-soon-wrapper .subscribe-box .email-submit-btn {
    font-size: 12px;
    font-weight: 600;
    height: 42px;
    letter-spacing: 2px;
    padding: 0 30px;
}
.comming-soon-wrapper .subscribe-box .form-control {
    background: #303542 none repeat scroll 0 0;
    color: #fff;
    height: 42px;
    padding: 0 142px 0 30px;
    text-transform: lowercase;
}
.comming-soon-wrapper .subscribe-box .form-control::-moz-placeholder {
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
}
.comming-soon-wrapper .subscribe-box:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 100px;
    content: "";
    height: calc(100% + 2px);
    left: -1px;
    position: absolute;
    top: -1px;
    width: calc(100% + 2px);
    z-index: -1;
}
.comming-soon-wrapper .subscribe-text h5 {
    color: #fff;
    margin-bottom: 25px;
}
.comming-soon-wrapper .social li {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
}
.comming-soon-wrapper .social a {
    color: #a1ad6e;
    font-size: 25px;
    height: 45px;
    line-height: 45px;
    width: 45px;
    z-index: 1;
}
.comming-soon-wrapper .social li a i {
    background: #2f3441 none repeat scroll 0 0;
    border-radius: 50px;
    display: block;
    line-height: 45px;
}
.comming-soon-wrapper .grad-bg-hover li a:after {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    border-radius: 50px;
    content: "";
    height: calc(100% + 2px);
    left: -1px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: absolute;
    top: -1px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: calc(100% + 2px);
    z-index: 0;
}
.comming-soon-wrapper .social a:hover {
    color: #fff;
}
.comming-soon-wrapper .grad-bg-hover li a:hover i {
    background: transparent none repeat scroll 0 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* =====================================
24. HOME PAGE 3 STYLE
===================================== */

#slider-area.home-style-3 .slider-image {
    top: 120px;
}
#slider-area.home-style-3 .slider-text {
    padding-bottom: 19em;
    padding-top: 15em;
}
.single-usage {
    float: left;
    margin: 0;
    padding: 0 70px;
    position: relative;
    width: 33.3333%;
}
.single-usage:after {
    background-color: #cdcdcd;
    content: "";
    height: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
}
.single-usage:last-child:after {
    display: none;
}
.single-usage:first-child {
    margin-left: 70px;
}
.single-usage:last-child {
    margin-left: -70px;
    padding-left: 140px;
    padding-right: 0;
}
.usage-icon.media-left {
    padding-right: 20px;
    vertical-align: middle;
}
.usage-icon i {
    color: #a1ad6e;
    font-size: 30px;
}
.useges-quantity h2 {
    color: #a1ad6e;
    font-size: 36px;
    line-height: 1;
    margin: 0;
}
.useges-quantity p {
    color: #4c5462;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}
#app-features-area.home-style-3.ptb-150 {
    padding-top: 110px;
}
.home-style-3 .about-app-mockup img {
    margin-left: -100px;
}
#fun-fact-area.home-style-3 {
    padding: 220px 0 150px;
}
.home-style-3 .download-app {
    margin-top: 100px;
    position: relative;
    z-index: 1;
}
.home-style-3 {
    position: relative;
    z-index: 1;
}
.home-style-3:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: skewY(170deg);
    transform: skewY(170deg);
    width: 100%;
    z-index: -1;
}
.home-style-3.gray-bg {
    background: transparent none repeat scroll 0 0;
}
.home-style-3:after {
    -webkit-transform: skewY(170deg);
    transform: skewY(170deg);
}
#slider-area.home-style-3:before {
    background: #fff none repeat scroll 0 0;
    height: 50%;
    top: 70%;
}
#app-features-area.home-style-3:before {
    background: #fff none repeat scroll 0 0;
    height: 50%;
    top: 50%;
}
#app-about-area.home-style-3:before {
    background: #f5f7fb none repeat scroll 0 0;
}
#how-it-works-area.home-style-3:before {
    background: #fff none repeat scroll 0 0;
}
#awesome-features-area.home-style-3:before {
    background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center / cover;
}
#awesome-features-area.home-style-3 {
    background: transparent none repeat scroll 0 0;
}
#fun-fact-area.home-style-3 {
    background: transparent none repeat scroll 0 0;
}
#fun-fact-area.home-style-3:before {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;
}
#team-area.home-style-3 {
    background: transparent none repeat scroll 0 0;
}
#team-area.home-style-3:before {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;
}
#pricing-table-area.home-style-3 {
    background: transparent none repeat scroll 0 0;
}
#pricing-table-area.home-style-3:before {
    background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") no-repeat scroll center center / cover;
}
#app-download-area.home-style-3 {
    background: transparent none repeat scroll 0 0;
}
#app-download-area.home-style-3:before {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}


/* =====================================
25. HOME PAGE 4 STYLE
===================================== */
.header-transparent .navbar {
    background: transparent none repeat scroll 0 0;
}
.header-transparent .navbar.affix {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
#slider-area.home-style-1.home-style-4 {
    background: rgba(0, 0, 0, 0) url("img/bg/6.jpg") repeat scroll center center / cover ;
    overflow: hidden;
    padding-top: 0;
}
#slider-area.home-style-1.home-style-4:before {
    z-index: 1;
}

/* =====================================
26. HOME PAGE 5 STYLE
===================================== */

.home-style-2.header-transparent .navbar.affix {
    background: #272d3a none repeat scroll 0 0;
}
#slider-area.home-style-5 {
    background: rgba(0, 0, 0, 0) url("img/bg/9.jpg") no-repeat scroll center center / cover ;
    padding-top: 90px;
}
#slider-area.home-style-5:before {
    background: rgba(0, 0, 0, 0) url("img/bg/10.png") no-repeat scroll center bottom / 100% auto;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 0;
}
/* =====================================
27. HOME PAGE 6 STYLE
===================================== */

.home-style-6.header-transparent .navbar.affix {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
}
#slider-area.home-style-6 {
    background: rgba(0, 0, 0, 0) url("img/bg/6.jpg") repeat scroll center center / cover ;
    overflow: hidden;
    padding-top: 0;
}
.home-style-6 .overlay-grad-three {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #a1ad6e 0%, #5e5e5c 100%) repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.85;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -2;
}

/* =====================================
28. HOME PAGE 7 STYLE
===================================== */

.video-background-area {
    position: relative;
    overflow: hidden;
}
#video-background {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

/* =====================================
29. HOME PAGE 8 STYLE
===================================== */

.video-background-area.home-style-8 #video-background {
    z-index: -1;
}

/* =====================================
30. HOME PAGE 9 STYLE
===================================== */

.video-background-area.home-style-9 #video-background {
    z-index: -2;
}

/* =====================================
31. HOME PAGE 10 STYLE
===================================== */
#slider-area.home-style-1.home-style-10:before {
    border-right: 100vw solid #fff;
    border-top: 120px solid #fff;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    width: 0;
    z-index: 0;
}
#slider-area.home-style-1.home-style-10:after {
    display: none;
}
#slider-area.home-style-10 .slider-image {
    top: 120px;
}
#slider-area.home-style-10 .slider-text {
    padding-bottom: 28em;
}
.home-style-10 .scroll-icon {
    bottom: 100px;
}
#app-features-area.home-style-10 {
    margin-top: -40px;
}

/* =====================================
32. HOME PAGE 11 STYLE
===================================== */
#slider-area.home-style-11 {
    background: rgba(0, 0, 0, 0) url("img/bg/6.jpg") no-repeat scroll center center / cover ;
}
#slider-area.home-style-1.home-style-11:before {
    z-index: 1;
}

/* =====================================
RTL Changes By BASSAM SAIF
===================================== */

@media (min-width: 992px)
{
    .col-md-offset-1 {
        margin-right: 8.33333333% !important;
        margin-left: 0 !important;
    }  
}

@media (min-width: 768px){
    .navbar-nav>li {
        float: right !important;
    }    
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: right !important;
    }
}


.slider-text h1 {
/*    text-align: right !important;*/
}

.slider-text p {
/*    text-align: right !important;*/
    float: right !important;
}

.button-group {
    direction: rtl;
}

h1, h2, h3, h4, h5, h6, p {
    direction: rtl;
}

.col-sm-4.p-0.wow.fadeIn {
    float: left !important;
}

.container-fluid {
    background: #a1ad6e;
}