/*------------------------------------------------------------------

wLander - Responsive Multipurpose Landing Page Template 
Version:	2.0 
Designed by: Weblabx 
=====================================================================


[Table of contents]


1. Global CSS
	1.1 General CSS
	1.2 Typography

2. Master color setting
    2.1 Background Color
    2.2 Text Color
    2.3 Border Color
    2.4 Box Shadow Color

3. Common CSS

3. Banner section
	3.1. Banner Text
	3.2. Signup Box

4. Features Section 
    4.1 Basic Style
    4.2 Features Icon

5. Benefits Section
    5.1 Basic Style
    5.2 Video Frame

6. Facts Section
    6.1 Basic Style
    6.2 Facts Icon
    6.3 Facts Number

7. Pricing Table Section

8. Testimonail Section

9. Subscribe Section

10. Footer Section

-------------------------------------------------------------------*/



/*=================================
   1. Global CSS
=================================*/

/*--------------------------------
   1.1 General CSS 
--------------------------------*/

body {
    font-family: 'Roboto', arial, serif;
    line-height: 1.6;
    font-size: 15px;
    color: #666;
}

section {
    padding: 60px 0;
}
section[style^="background"] h2{
    color: #fff !important;
}
button {
    padding: 9px 30px;
    font-size: 16px;
    border: none;
}
a:hover{
    text-decoration: none;
}



/*--------------------------------
   1.2 Typography
--------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Oswald', sans-serif;
    color: #333;
    font-weight: 500;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 20px;
}


/*=================================
   2. Master color setting
=================================*/

/*--------------------------------
   2.1 Background Color setting
--------------------------------*/
.wbutton,
.signup-box-headling,
.signup-button,
.btn-signup,
.feature:hover .icon,
.table-dark,
.table-wrapper:hover,
.table-title,
.pricing-row,
.social-icons .fa:hover,
.box-header::after,
.social-icons .fa:hover,
.table-wrapper.table-dark,
.nav-bg {
    background-color: #000000;
	 border-bottom: solid 3px #FFA500;
	 
	 -webkit-box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);
box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);
}

.wbutton:hover,
.signup-button:hover,
.btn-signup:hover{
    background: #F9A825;
}

.table-wrapper,
.table-dark .pricing-row,
.table-wrapper:hover .pricing-row{
    background-color: #fff;
}


/*--------------------------------
   2.2 Text Color setting
--------------------------------*/
a,
a:hover,
.banner-text h3,
.counter-section .icon-counter,
.icon-features,
.feature .icon,
.button,
.feature-details h3,
.icon-container-cirlce,
.table-dark .pricing-row,
.table-wrapper:hover .pricing-row,
.footer-contact span,
.table-wrapper a .button:hover,
.btn-bordered.white:hover {
    color: #FBC02D;
}


/*--------------------------------
   2.3 Border Color setting
--------------------------------*/
.arrow-down,
.feature .icon,
.feature:hover .icon,
.video-frame,
.subscribe .form-control,
.subscribe .form-control:focus {
    border-color: #FBC02D !important;
}



/*--------------------------------
   2.4 Box Shadows Color setting
--------------------------------*/
.subscribe .form-control:focus {
    box-shadow: 0 0 8px #FBC02D;
}

.signup-box .form-control:focus {
    box-shadow: 0 0 0 2px #FBC02D;
}



/*================================
   3. COMMON CSS
================================*/
.bg-grey{
    background:#eee;
}


.bg-yellow{
    background:#FBC02D;
}


.fix-background {
    position: relative;
}

.bg-instagram{
    background: #f09433; 
background: -moz-linear-gradient(45deg, #7B3DB6 0%, #e6683c 25%, #C93082 50%, #C93082 75%, #F8762D 100%); 
background: -webkit-linear-gradient(45deg, #7B3DB6 0%,#e6683c 25%,#C93082 50%,#C93082 75%,#F8762D 100%); 
background: linear-gradient(45deg, #7B3DB6 0%,#e6683c 25%,#C93082 50%,#C93082 75%,#F8762D 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7B3DB6', endColorstr='#F8762D',GradientType=1 );
}




.position-relative {
    position: relative;
    z-index: 5;
}

.parallax {
    background-size: cover;
    background-attachment: fixed;
}

.parallax2 {
    width: 100%;
    background-attachment: fixed;
	height: 400px;
}



.opacity-light,
.opacity-dark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.opacity-light {
    opacity: 0.0;
}

.opacity-dark {
    opacity: 0.8;
}

.bg-black {
    background: #000;
}

.grey-bg {
    background: #eee;
}

.wbutton {
    padding: 10px 26px;
    font-size: 15px;
    color: #fff;
    border: none;
    font-weight: 500;
    border-radius: 2px;
}

.wbutton:visited {
    color: #fff;
}

p + a>.wbutton {
    margin-top: 10px;
    display: inline-block;
}

a ~ .section-description {
    margin-top: 30px;
}
ul li{
    line-height: 2;
}
ul li i{
    margin-right: 4px;
}

h2.box-header{
    font-size: 38px;
    margin-top: 0;
}
.box-header::after {
    width: 75px;
    height: 4px;
    display: block;
    margin: 25px auto 22px;
    content: '';
}

.left.box-header::after {
    margin-left: 0;
}
@media only screen and (max-width: 768px) {
    h2.box-header {
        font-size: 32px;
    }
}

@media only screen and (max-width: 480px) {
    .box-header::after,
    .left.box-header::after {
        margin-top: 10px;
    }
    h2.box-header {
        font-size: 28px;
    }
}

.description {
    font-size: 18px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 360px) {
	.description {
		font-size: 17px;
	}	
}


/*================================
   4. Banner Section
================================*/

/*--------------------------------
   4.1 Basic Style
--------------------------------*/
.banner {
    width: 100%;
    min-height: 670px;
    background-size: cover;
    background-position: bottom;
    padding-top: 150px;
    padding-bottom: 90px;
}


.navbar{
    /* border-bottom: solid 1px rgba(255,255,255,0.1); */
    padding-top: 15px;
    padding-bottom: 13px;
	background-color: 	#222222;
	border-bottom: solid 3px #FFA500;
	
	
-webkit-box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);
box-shadow: 0px 10px 15px 5px rgba(0,0,0,0.75);

}



.nav-bg{
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.logo {
    margin-bottom: 63px;
    margin-top: 15px;
}

@media only screen and (max-width: 992px) {
    .logo {
        margin-bottom: 50px;
    }
}
.nav-link {
    padding: 0 15px !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
	text-shadow: 0 0 15px #000;
}

.nav-link:hover {
    color: #fff;
}
.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.7);
}

.banner-text {
    padding-top: 0;
    color: #fff !important;
    font-size: 20px;
    text-shadow: 0 0 3px #000;
}

@media only screen and (max-width: 991.98px) {
    .banner-text {
        font-size: 19px;
    }
    .nav-link{
        line-height: 2.7;
        font-size: 15px;
    }
    .navbar ul{
        margin-top: 10px;
    }
    .navbar{
        background: #000000 !important;
    }
}

.banner-text h1 {
    font-size: 56px;
    line-height: 1.3;
    letter-spacing: 0px;
    text-shadow: 0 0 15px #000;
    margin-bottom: 35px;
    margin-top: 0;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
}

@media only screen and (max-width: 992px) {
    .banner-text h1 {
        font-size: 48px;
    }
}
@media only screen and (max-width: 360px) {
    .banner-text h1 {
        font-size: 39px;
    }
}

.banner-text h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-shadow: 0 0 11px #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 9px;
}

@media only screen and (max-width: 992px) {
    .banner-text h3 {
        font-size: 24px;
    }
}
@media only screen and (max-width: 360px) {
    .banner-text h3 {
        font-size: 21px;
		letter-spacing: 0;
    }
}

.banner-text button {
    margin-top: 30px;
}

.wbutton-bordered {
    background: none;
    border: solid 2px;
    color: #fff;
    font-size: 20px;
    padding: 9px 25px;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
    border-radius: 2px;
    font-family: 'Oswald', sans-serif;
}

.wbutton-bordered:hover {
    background: #fff;
    border-color: #fff;
    color: #FBC02D;
}


@media only screen and (max-width: 360px) {
    .wbutton-bordered {
        font-size: 18px;
    }
}



/*--------------------------------
   4.2 Signup Box
--------------------------------*/
.signup-box {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .signup-box {
        margin-top: 60px;
    }
}

.signup-box .form-control {
    border: none;
    height: 45px;
    margin-bottom: 20px;
    border-radius: 0;
    font-size: 14px;
}

.signup-box-headling {
    width: 100%;
    height: auto;
    padding: 20px 20px 5px;
    position: relative;
    text-align: center;
}

.signup-box-headling h2,
.signup-box-headling h3{
    color: #fff;
}

.signup-box-headling h2{
    margin-bottom: 6px
}
@media only screen and (max-width: 480px) {
	.signup-box-headling h2{
		font-size: 28px;
	}
	.signup-box-headling h3{
		font-size: 22px;
	}
}
.signup-box-headling h3 {
    margin-top: 0;
    margin-bottom: 30px;
    font-family: Pacifico;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent !important;
    border-right: 20px solid transparent !important;
    border-top: 20px solid;
    bottom: -17px;
    left: 45%;
    position: absolute;
}

.signup-box-body {
    width: 100%;
    padding: 20px;
    background: #eee;
    padding-top: 40px;
}
.signup-button {
    height: 46px;
    font-size: 18px;
    border: none;
    border-bottom: solid 4px #ccc;
    width: 100%;
    color: #fff;
    line-height: 1;
    font-family: 'Oswald', sans-serif;
}
@media only screen and (max-width: 480px) {
	.signup-button {
		font-size: 17px;
	}
}

.btn-signup {
    height: 46px;
    font-size: 18px;
    border-bottom: solid 4px #ccc;
}

.btn-signup:hover {
    color: #fff;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
    height: 48px;
}

.contact-form .form-control {
    box-shadow: none;
    border-radius: 0;
}



/*================================
    Features Section
================================*/

/*--------------------------------
   4.1 Basic Style
--------------------------------*/
.icon-features {
    font-size: 46px;
    margin-bottom: 10px;
    border: solid 2px #eee;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
    border-radius: 50%;
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.feature {
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
}

@media only screen and (max-width: 992px) {
    .feature {
        margin-bottom: 25px;
    }
}

.feature:last-child {
    margin-bottom: 0;
}

.feature .icon-container {
    min-height: 80px;
    float: left;
}


/*--------------------------------
   5.2 Feature Icon
--------------------------------*/
.feature .icon {
    width: 66px;
    height: 66px;
    line-height: 66px;
    font-size: 30px;
    border-radius: 50%;
    border: solid 2px;
    text-align: center;
    -webkit-transition: all linear 0.3s;
    transition: all linear 0.3s;
}
.feature:hover .icon {
    border: solid 2px;
    color: #fff;
}

@media only screen and (max-width: 992px) {
    .feature .icon {
        width: 70px;
        height: 70px;
        line-height: 70px;
    }
}



/*--------------------------------
   5.2 Feature Text
--------------------------------*/
.feature-details {
    overflow: hidden;
}

.feature-details h3 {
    font-family: 'Roboto', sans-serif;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 20px;
}

@media only screen and (max-width: 992px) {
    .feature-details h3 {
        font-size: 21px;
    }
}

.feature-details p {
    line-height: 1.5;
}

@media only screen and (max-width: 992px) {
    .feature-details p {
        font-size: 15px;
    }
}


@media only screen and (max-width: 992px) {
    .sm-top-margin {
        margin-top: 30px;
    }
}

.icon-container-cirlce {
    width: 100px;
    height: 100px;
    line-height: 130px;
    text-align: center;
    margin: 0 auto;
}



/*=================================
    5. Benefits Section
=================================*/
.benefit:last-child {
    margin-bottom: 0;
}

.benefit h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    margin-bottom: 12px;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .benefit {
        margin-bottom: 35px;
    }
    .features-img {
        text-align: center !important;
    }
    .features-img img {
        display: inline;
        margin-top: 45px;
    }
}

@media only screen and (max-width: 480px) {
    .benefit h3{
        font-size: 20px;
    }
}

.announcement {
    padding: 35px 0;
}

.video-frame {
    border-width: 5px !important;
    border-style: solid !important;
}


/*=================================
   6. Facts Section
=================================*/

/*--------------------------------
   6.1 General CSS 
--------------------------------*/
.counter-item {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.2;
}
@media only screen and (max-width: 992px) {
    .counter-item {
        font-size: 16px;
    }
}
@media only screen and (max-width: 768px) {
    .counter-item {
        margin-bottom: 40px;
    }
	.counter-item:last-child {
        margin-bottom: 0;
    }
}



/*--------------------------------
   6.2 Facts Icon 
--------------------------------*/
.counter-section .icon-counter {
    font-size: 60px;
    margin-bottom: 20px;
}


/*--------------------------------
   6.3 Facts Number 
---------------------------------*/
.counter-section .number {
    font-size: 52px;
    line-height: 1.2;
    font-weight: 300;
}



/*================================
   7. Pricing Table Section
================================*/

.table-wrapper {
    width: 100%;
    height: auto;
    padding: 30px 20px 30px;
    text-align: center;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    margin-top: 25px;
	margin-bottom: 8px;
}

.table-dark,
.table-dark h3,
.table-wrapper:hover,
.table-wrapper:hover h3
{
    color: #fff !important;
}

.table-wrapper .button{
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
}
.button {
    font-size: 18px;
    padding: 7px 25px;
    border: none;
    border: solid 2px;
    background: none;
    margin-top: 20px;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    border-radius: 2px;
}

.table-wrapper:hover .button,
.table-dark .button {
    color: #fff;
    border-color: #fff;
}

.table-wrapper .button:hover {
    background: #fff;
}

.table-title {
    margin: 0;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-top: 0;
    font-size: 60px;
}

.table-wrapper ul {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
}

.table-wrapper ul li {
    border-bottom: dashed 1px #ddd;
    list-style-type: none;
    font-size: 16px;
    line-height: 2.7;
}

.table-dark ul li,
.table-wrapper:hover ul li {
    border-color: #fff;
}

.pricing-row {
    font-size: 23px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-sizing: border-box;
    padding-top: 20px;
    margin: 0 auto;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 25px;
}

.currency-part {
    position: relative;
    top: -20px;
    right: -5px;
}

.number-part {
    font-size: 60px;
}

.decimal-part {
    font-size: 22px;
    position: relative;
    top: -22px;
    left: -6px;
    letter-spacing: 1px;
}

.time-part {
    font-size: 16px;
    opacity: 0.7;
    position: relative;
    left: -22px;
}



/*=================================
   8. Testimonail Section
=================================*/
.testimonial {
    text-align: center;
    color:#fff; 
    text-shadow:0 0 2px #000;
}

.testimonial-text { 
    font-size: 20px;
    line-height: 1.6;
    margin: 20px auto 0;
}

.testimonial-photo {
    margin-top: 25px;
    display: inline-block;
}

.testimonial-photo img {
    width: 120px !important;
    border-radius: 50%;
}

.testimonial-author {
    padding: 15px 0;
    font-size: 18px;
    letter-spacing: 1px;
}
.owl-carousel button.owl-dot{
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.4);
    margin: 0 4px;
    border-radius: 10px;
}
.owl-carousel button.owl-dot.active{
    background: rgba(255,255,255,9);
}


/*=================================
   9. Subscribe Section
=================================*/
.subscribe p {
    text-align: center;
    font-size: 16px;
}

.subscribe .form-control {
    border: solid 2px;
    height: 50px;
}

.subscribe .wbutton {
    width: 100%;
    font-size: 18px;
    padding: 10px 0;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    font-weight: 400;
}

.social-icons {
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: center;
}

.social-icons .fa {
    background: #666;
    color: #fff;
    font-size: 18px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-right: 1px;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.social-icons .fa:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}



/*=================================
   10. Footer
=================================*/
#page-footer {
    background: #444;
    color: #fff;
    padding: 45px 0 0;
}

.footer-contact {
    margin-bottom: 40px;
}

.footer-contact span {
    margin-bottom: 12px;
}

.footer-bottom {
    border-top: solid 1px #666;
    color: #aaa;
    padding: 15px 0;
    text-align: center;
    font-size: 15px;
}

.icon-lg {
    font-size: 42px;
}

ul.contact {
    margin: 0;
    padding: 0;
}

ul.contact li {
    list-style-type: none;
    height: 30px;
}

ul.contact .glyphicon {
    margin-right: 10px;
    color: #fff;
}

.social-icon {
    margin-bottom: 10px;
    margin-top: 5px;
}

.social-icon i {
    margin-right: 5px;
    font-size: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 11px;
    color: #fff;
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.social-icon i:hover {
    background: #31aae2;
}

.social-icon b:hover {
    margin-right: 30px;
    border-top-color: blue
}

.copyright {
    border-top: solid 1px #666;
    padding: 15px 0;
    margin-top: 20px;
}





.whatsappvisible
{
  position:fixed; 
  z-index:999;
  background: #20B038;
  width:120px; height:40px;  
  right:0px; bottom:40%; 
  padding: 9px 18px 9px 9px;    
  border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  -webkit-border-radius: 4px 0px 0px 4px;
  text-align: right;
  
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}

.whatsapphidden 
{
  position:fixed; 
  z-index:999;
  background: #20B038;
  width:140px; height:60px;  
  right:0px; bottom:35%; 
  padding: 9px 18px 9px 9px;    
  border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  -webkit-border-radius: 4px 0px 0px 4px;
  text-align: right;
  
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}


.whatsapphidden a 
{
	color: #ffffff;
}

.whatsappvisible a 
{
	color: #ffffff;
}