@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  }
body {
  padding: 0;
  margin: 0;
  background:#FFF;
  font-family: sans-serif;}

.main-wrapper{
  width:100%;
  
}
.main-header-navbar-wrapper{
  max-width:100%;
  background-color: #fff;
 padding: 0 10px;
  
}
.clr{
  clear:both;
  }

.header-main{
  width:100%;
  height:auto;
  margin:auto;
  background-color: #fff;
  padding: 15px 0px;
}

.header-inner{
  max-width: 1200px;
  height:auto;
  margin: auto;
  background-color: #fff;
}

.header-left{
  width: 41%;
  height: auto;
  margin: auto;
  float: left;

}

.header-box{
  max-width: 100%;
  height: auto;
  margin:auto;
  padding: 15% 0;
  text-align: center;
  }
.header-box .fa {
  font-size: 28px;
  text-align: center;
  text-decoration: none;
  margin: 0 5px;
  
  color: #2aa2a8;
}
.header-box .fa:hover {
    opacity: 0.7;
}


.header-center{
  width: 18%;
  height: auto;
  margin: auto;
  float: left;

}
.header-center img{
    display: block;
  width: 100%;
  height: auto;
  border:none;
}

.header-box-center{
  max-width: 100%;
  height: auto;
  margin:auto;
  padding: 0px;
  }

.header-right{
  width: 41%;
  height: auto;
  margin: auto;
  float: right;

}


.header-box-right{
  max-width: 100%;
  height: auto;
  margin:auto;
  padding: 14% 0;
  text-align: center;
  }



.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 60%;
  text-align: center;
  margin: auto;
}

.icon {
  padding: 8px;
  background: #2aa2a8;
  color: white;
  min-width: 24px;
  text-align: center;
  border: 1px solid #2aa2a8;
  border-radius: 0 8px 8px 0;

}

.input-field {
  width: 100%;
  padding: 8px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 8px 0 0 8px;
}

.input-field:focus {
  border: 2px solid #2aa2a8;
}


.navbar-main{
  max-width:100%;
  height:auto;
  margin:auto;
  background-color: #fff;
  padding: 0px 20px;
}

.navbar-inner{
  max-width: 1200px;
  height:auto;
  margin: auto;
  background-color: #2aa2a8;
  border-bottom: 1px solid #2aa2a8;
  border-radius: 8px 8px 0 0;
  text-align: center;
  font-family: "Archivo Narrow",sans-serif;
  letter-spacing: 0px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;

}

nav {
  text-align:center;
  width: 100%;
  position:relative;
  
}
nav ul{
  clear:both;
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  text-align:center;
  z-index:99;
  
  }
nav ul li{
  display: inline-block;
}

nav ul li a{
  color:#fff;
  text-decoration: none;
  display: block;
  line-height: 50px;
  padding: 0 10px;
 
}

.navbar-inner nav ul li:hover{
  background: #1d7175;
  cursor: pointer;
}
.navbar-inner nav ul li a#active
{
  background: #1d7175;
}

nav ul li:hover ul{
  display: block;
  }

nav ul ul{
  display: none;
  position: absolute;
  max-width: 100%;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: rgba(23, 88, 92, 0.9);
  box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
  text-align:left;
  float: left;
  left: 0;
  }

nav ul ul li{
  display: block;
  float:left;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 33.3%;
  font-size: 14px;
  text-transform: capitalize;
  font-weight: normal;

  }
  nav ul li ul li a{
  line-height: 35px;
  }

nav ul li i{
  color: #fff;
  padding-left:6px;
  }

.menu-toggle{
  color: #fff;
  float: left;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
  padding: 0 20px;
}



.small-header-right{
  position: relative;
  display: none;
  width: 70%;
  height: auto;
  margin: auto;
  float: right;
  padding: 0 20px;

}
.small-header-box-right{
    display: none;
  max-width: 100%;
  height: auto;
  margin:auto;
  text-align: center;
  padding: 8px 0;

  }



 @media (max-width: 768px){
    .menu-toggle{
  display: block;
}
.main-header-navbar-wrapper{
 padding: 0;

  
}

.navbar-main{
  padding: 0;
}
.navbar-inner{
  border: none;
  border-radius: 0px 0px 0 0;
  text-align: center; 
}
    nav ul{
      display:none;
      position: static;
      width:100%;
      float:left;
      }
    nav ul li{
      display: block;
      text-align:center;
      }
    nav ul ul{
      position:static;
      max-width:100%;
      box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    }
    nav ul li a{
  border-bottom: 1px solid rgba(0,0,0,.2);
  
}
    nav ul ul li{
      border-radius: 0;
      width:50%;
      text-align: center;
      } 
      nav ul li ul li a{
  line-height: 30px;
  } 
  .disablelink{
    pointer-events: none;
    cursor:pointer;}
    .header-right{
  display: none;
}

    .small-header-right{
  display: block;
}
.small-header-box-right{
    display: block;
  }
  .small-input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  text-align: center;
  margin: auto;
}
.small-input-field {
  width: 100%;
  padding: 8px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 8px 0 0 8px;
}

.small-input-field:focus {
  border: 1px solid #000333;
}
.small-input-container .small-icon {
  padding: 8px;
  background: #000333;
  color: white;
  min-width: 50px;
  text-align: center;
  border: 1px solid #000333;
  border-radius: 0 8px 8px 0;

}
.header-left{
  width: 100%;
  height: auto;
  margin: auto;
  float: left;
margin-bottom: 10px;
}

.header-box{
  max-width: 100%;
  height: auto;
  margin:auto;
  padding: 0px 0;
  text-align: center;
  }
.header-box .fa {
  font-size: 20px;
  text-align: center;.
  text-decoration: none;
  margin: 0 5px;
  color: #0086e5;
}
.header-center{
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
float: none;
}
.header-center img{
    display: block;
  max-width: 60px;
  height: auto;
  float: none;
  margin: auto;
}
.header-box-center{
  max-width: 100%;
  height: auto;
  margin:auto;
  padding: 0;
  }
.header-main{
  padding: 10px 0px;
}
}
@media (max-width: 450px){
  nav ul li {
  line-height: 35px;
}
nav ul li a{
  line-height: 40px;
}
nav ul ul li{
      width:50%; 
      font-size: 14px;
      text-align: left;
      } 
nav ul li ul li a{
  line-height: 27px;
  }
  .small-header-right{
  width: 80%;
  padding: 0 10px;
}
  .menu-toggle{
  padding: 0 10px;
}
}
@media (max-width: 390px){
  nav ul ul li{
      width:100%; 
      font-size: 14px;
      text-align: center;
      } 
}
@media (max-width: 250px){
  .small-header-right{
  width: 70%;
  padding: 0 2px;
}
  .menu-toggle{
  padding: 0 2px;
}
}


/* services area start for bid devices */
.services-main{
  max-width:100%;
  height:auto;
  margin:auto;
  padding: 0px 20px;
}
.services-inner {
  max-width: 1200px;
  position: relative;
  margin: auto;
  text-align: center;
}
.services-inner h1 {
 text-align: center;
  color: #2e2e2e;
  text-transform: uppercase;
  margin: 30px 0 10px 0;
  
}
.services-left{
  width: 25%;
  height: auto;
  float: left;
  }
.services-box{
  max-width: 100%;
  height: auto;
  margin:auto;
  background: #fff;
  margin: 10px;
  padding: 20px 10px;
  border: 2px solid #eee;
  border-radius: 8px;
  }
  .services-box:hover{
  
   box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
    
  }
  .services-box a{
    text-decoration: none;
  }
  .services-box img{
  display: block;
  max-width: 50px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  border:none;
  }
  .services-box h3{
  text-align: center;
  color: #2e2e2e;
  margin: 15px 0;
  
  }
.services-box p{
    
  color: #333333;
  font-size: 14px;
  font-family: sans-serif;
  text-align: center;
  padding: 0 10px;
  line-height: 20px;
  }
  /* services area end for big devices*/
  /* feature area start for bid devices */
.feature-main{
  max-width:100%;
  height:auto;
  margin:auto;
  padding: 0px 20px;
  margin-bottom: 10px;
}
.feature-inner {
  max-width: 1200px;
  position: relative;
  margin: auto;
  text-align: center;
}
.feature-inner h1 {
  text-align: center;
  color: #2e2e2e;
  text-transform: uppercase;
  margin: 30px 0 10px 0;
  
}
.feature-left{
  width: 25%;
  height: auto;
  float: left;
  }
.feature-box{
  max-width: 100%;
  height: auto;
  margin:auto;
  background: #fff;
  margin: 10px;
  padding: 20px 10px;
  border: 2px solid #eee;
  border-radius: 8px;
  position: relative;
  }
.image {
  display: block;
  width: 100%;
  height: auto;
  border:none;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(42, 162, 168, 0.6);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.feature-box:hover .overlay {
  bottom: 0;
  height: 100%;
  cursor: pointer;
}

.feature-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
  /* feature area end for big devices*/
  /* services area start for small devices */
 @media (max-width: 1100px){
    .services-box{
  min-height: 240px;
  }
  }
  @media (max-width: 975px){
    .services-box{
  min-height: 250px;
  }
  }
  @media (max-width: 916px){
    .services-box{
  min-height: 285px;
  }
  }
  
  
  @media (max-width: 768px){
    .services-left{
  width: 50%;
  }
  .services-main{
  padding: 0px 0px;
}
.services-box p{
  font-size: 12px;
  }
  .services-box{
  padding: 20px 5px;
  min-height: auto;
  }
  .feature-main{
  padding: 0px 0px;
}
  
  }
  @media (max-width: 594px){
    .services-box{
  min-height: 210px;
  }
  .feature-left{
  width: 50%;
  }
  }
  @media (max-width: 450px){
  .services-left{
  width: 100%;
  }
  .services-main{
  padding: 0px 0px;
}
.services-box p{
  font-size: 12px;
  }
  .services-box{
  padding: 20px 10px;
  }
  .services-box{
  min-height: auto;
  }
  }
/* services area end for small devices */