/*=======================================
    GENERAL STYLES
==================================================*/
  

 
 
 
 

body {
          font-family: 'Open Sans', sans-serif;
    font-size:14px;
    position: relative;
}

.text-center {
    text-align:center;
}

h1, h2, h3, h4, h5, h6 {
   font-family: 'Open Sans', sans-serif;
}

h1 {
  
    text-transform:uppercase;
  
  
}
h2 {
    color:  #F46102;
    font-weight:900;

}
    h2:after {
      display: block;
content: "";
height: 2px;
width: 150px;
background: #F46102;
margin: 10px auto 40px;

    }
    

h3 {
    line-height:30px;
    padding-bottom:20px;
}
h4 {
    line-height:40px;
}

p {
    font-weight:300;
    line-height:30px;
    padding-bottom:20px;
}

.space-pad {
    padding-bottom:50px;
    padding-top:50px;
}


section {
    padding-top:50px;
    padding-bottom:40px;
}

/*=======================================
    COLOR CODES
==================================================*/
.main-color {
    color: #F46102;
}

/*=======================================
    NAVIGATION STYLES
==================================================*/
.navbar a {
    color:#FEFAA6 !important;
}
.navbar-header a {
    color:#ffffff !important;
    padding-right:100px;
}

nav {
	position: absolute;
	width: 100%;
    background: #fff;
    z-index:99;
}
.fixed {
	position: fixed; 
	top: 0; 
	min-height: 50px; 
	z-index: 99;
}

.navbar-inverse {
background-color: #F46102;
border-color: #FF8A03;
}


/*=======================================
    HEADER STYLES
==================================================*/
.head{
	font-size: 80px !important;
   font-weight: 900!important;
   color:#fff;

}

@media (max-width: 480px){
.head{
	font-size: 60px !important;
   font-weight: 900!important;
   color:#fff;
}
}

.head-main {
   font-size: 40px !important;
   font-weight: 900!important;
   color:#fff;
  
   
}
@media (max-width: 480px){
.head-main {
   font-size: 30px !important;
   font-weight: 900!important;
   color:#fff;
  
 }  
}

.head-sub-main {
    font-size:40px !important;
    font-weight:600!important;
    padding:5px 20px 30px 20px;
    color: yellow;
}
.head-last {
  
    padding:5px 20px 200px 20px;
    font-weight: 500!important;
    color:#fff;
}
#home {
    background-image: url("../img/head.jpg");
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-attachment: fixed;
min-height:650px;
}
.div-trans {
    padding:5px;
    background-color: rgba(33,1, 6, 0.5);
min-height: 400px;
margin-top: 160px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:30px;
}
    .div-trans .form-control {
        background-color: rgba(255, 255, 255, 0);
    }
    
 @media (max-width: 480px){
   .div-trans {
    margin-top: 50px;
    margin-bottom:30px;

 }   
}        
 .box {
    padding:5px;
    margin-top: 160px;
    margin-bottom:30px;
}
  
@media (max-width: 480px){
 .box {
    padding:5px;
    margin-top: 100px;
}
}
.feature
{
    color:#F46102;
}
@media (max-width: 480px)
{
    .feature
    {
        padding-top: 30px;
    }

}
.highlight{
	padding-bottom:30px;
}

.ul {
  list-style-type: none;
  color:#F46102;
  
}
.li{
	padding-top:10px;
}
/*=======================================
   navbar
===========================================*/
/* Create a sticky/fixed navbar */
#navbar {
  overflow: hidden;
  padding: 10px 0px; /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s; /* Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
 
}

/* Style the navbar links */
#navbar a {
  float: left;
  text-align: center;
  padding: 10px 20px ; 
}

/* Style the logo */
#navbar #logo {
  transition: 0.4s;
}

/* Links on mouse-over */

/* Display some links to the right */


/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {
     padding: 0px 0px !important; 
    /* Use !important to make sure that JavaScript doesn't override the padding on small screens */
  }
  
  
  
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}
/*=======================================
    Services  STYLES
==================================================*/

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: #fff;
background-color: #F46102;
}

#Parallax-one {
    background-image: url("../img/1.jpg");
padding: 30px;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-attachment: fixed;
min-height:250px;
color:#fff;
}
 #Parallax-one i {
        color:#fff;
    }
/*=======================================
    PRICING STYLES
==================================================*/


.plan {
    background: #eef1f3;
    padding: 0 0 15px 0;
    margin: 30px 0px;
    list-style: none;
    text-align: center;
  
}

.plan-active {
          -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}
.head-active {
    background-color: rgb(173, 235, 101)!important;
}
.plan li {
    padding: 15px 0px;
    color: #434749;
    border-top: 1px dashed #000;
}

.plan li.plan-head {
   padding: 15px 0px;
background-color: #6F6F6F;
color: #FFFFFF;
line-height: 20px;
font-size: 20px;
font-weight: 600;
border: none;
   }

.plan li.main-price {
   padding: 25px 0px;
border: none;
font-size: 30px;
}
#Parallax-two {
    background-image: url("../img/2.jpg");
padding:30px;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-attachment: fixed;
min-height:300px;
color:#fff;
}
    #Parallax-two i {
        color:#fff;
    }

#Parallax-three {
 background-image: url('../img/2.jpg');
    
padding:30px;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
background-attachment: fixed;
min-height:300px;
color:#fff;
}
    #Parallax-three i {
        color:#fff;
    }


 
/*=======================================
    CONTACT STYLES
==================================================*/

#social-icon a {
    color:#616161!important;
    margin-left:10px;
     font-size:20px;
     float:left;
}

/*=======================================
    FOOTER STYLES
==================================================*/


#footer {
    background-color:#F46102;
    color:#fff;
    padding:20px 50px 20px 50px;
    text-align:right;
}
/*==============================================
  Call now
==================================================*/
.phonelink{
    position: fixed; /* Lock location always on the scree */
    bottom: 20px; /* Set to the bottom */
    right: 0px; /* Set to the right */
    margin: 10px; /* Add space around background */
}
.phoneicon{
    width: 35px; /* Set width of icon */
    height: 35px; /* Set height of icon */
}
@media screen and (max-width: 480px){
    .lgscreenphone{
        display: none;  /* On small screens make phone icon disappear */
    }
    .mbscreenphone{
        display: block; /* On small screens make phone icon appear */
    }
}
@media screen and (min-width: 481px){
    .mbscreenphone{
        display: none; /* On large screens make phone icon disappear */
    }
    .lgscreenphone{
        display: block; /* On large screens make phone icon appear */
    }
}



/*==============================================
  whatsapp
==================================================*/
.whatsapplink{
    position: fixed; /* Lock location always on the scree */
    bottom: 20px; /* Set to the bottom */
    left: 0px; /* Set to the right */
    margin: 10px; /* Add space around background */
}
.whatsappicon{
    width: 45px; /* Set width of icon */
    height: 45px; /* Set height of icon */
}
@media screen and (max-width: 480px){
    .lgscreenwhatsapp{
        display: none;  /* On small screens make phone icon disappear */
    }
    .mbscreenwhatsapp{
        display: block; /* On small screens make phone icon appear */
    }
}
@media screen and (min-width: 481px){
    .mbscreenwhatsapp{
        display: none; /* On large screens make phone icon disappear */
    }
    .lgscreenwhatsapp{
        display: block; /* On large screens make phone icon appear */
    }
}