/*start css*/

 @import url("https://use.typekit.net/brd7lyz.css");

  /* Navigation menu */
.nav-logo{
    padding: 13px 0 0;display: block}
.header-links{
    list-style-type: none;
    margin: 0;padding: 0;
}
.mrgl50{
margin-left: 50px;}
.header-links li{text-align: left;float: left;display: inline-block;padding: 15px}
.call-link{display: block;padding: 11px 0}
.header-links li .call-link span{font-size: 20px;color: #7e6827;    display: inline-block;
    padding: 0 0 0 5px;font-weight: 700}
.header-links li span,.address-in-mb .address span{font-size: 16px;color: #2f2f2f;font-weight: 600;text-transform: uppercase; display: block;}
.header-links li label,.address-in-mb .address label{
    text-transform: uppercase;
    color: #985f2f;   
    display: block;
    font-weight: 700;
}
.header-links li a.call-link:hover span{color: #985f2f}
.header-links li img,.address-in-mb .address img{float: left;margin-right: 10px;}
  div#overlay { display: none; }
  a#toggle {
      position: absolute;
      top: 24px;
      right: 17px;
      width: 39px;
      height: 37px;
          background-color: #1B9789;
    background: radial-gradient(circle, #1E997F 0%, #189593 100%);
      text-align: center;
      color: white;
      cursor: pointer;
      display: none;
      z-index: 12;
      padding: 10px;
      line-height: 17px;
      border-radius: 10px;
      -webkit-transition: all ease-out 0.3s;
      -moz-transition: all ease-out 0.3s;
      -ms-transition: all ease-out 0.3s;
      transition: all ease-out 0.3s;
      border-radius: 3px;
  }
 /*-----Header css start-----*/
header {
    width: 100%;
}
 .hidden{display: none;}
.mainheader{position:fixed;width:100%;z-index: 100;transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;-ms-transition: all 0.5s ease-in-out 0s;top:0;left: 0;right: 0;margin: auto;}


 .arrow{padding-left: 7px;
    /* vertical-align: middle; */
    /* margin-top: -10px; */
    top: -3px;
    position: relative;}
@keyframes slideDown {0% {transform: translateY(-100%);}50%{transform: translateY(-3%);}75%{transform: translateY(3%);} 100% {transform: translateY(0%);}}
@-webkit-keyframes slideDown {0% {-webkit-transform: translateY(-100%);}50%{-webkit-transform: translateY(-3%);}75%{-webkit-transform: translateY(3%);} 100% {-webkit-transform: translateY(0%);}}
.menudrop {
    z-index: 1;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin-left: 9px;
    padding-left: 1px;
    color: #fff;
    font-size: 14px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: url(../images/scroll.png);
    background-repeat: no-repeat;
}
.mCSB_inside > .mCSB_container{padding-right:38px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{      width: 10px !important;height: 37px !important;}
.mCSB_scrollTools .mCSB_draggerRail{    background-color: #cccccc !important;}
.mCSB_scrollTools{opacity:1 !important;}
.mCSB_scrollTools .mCSB_dragger{    height: 46px !important;}



/*================= banner css ====================*/


.banner_slide, .banner {position: relative;}
.banner_text {position: absolute;top: 60%;left:5%;z-index: 1;}
.bannr_txt_inn {padding: 30px 50px;text-align: left;}
.banner_head{font-size: 56px;color: #ffffff;line-height: 100%;margin-bottom: 20px;font-family: commuters-sans, sans-serif;font-weight: 900;text-shadow: 1px 2px 2px #000;}
.small_txt{font-size: 30px;color: #ffffff;line-height: 100%;margin-bottom: 40px;clear: both;font-family: commuters-sans, sans-serif;font-weight: 700;text-shadow: 1px 2px 2px #000;}
.btn-talk{position: relative;z-index: 2; background: #ff9a00;font-size: 26px;color: #141313;text-align: center;line-height: 30px;padding: 15px 60px;border-radius: 4px;margin-top:20px;font-weight:600;text-transform: uppercase; display: inline-block;}
.banner:before {content: "";position: absolute;bottom: 0;right: 0;width: 0;height: 0;border-bottom: 428px solid rgba(255, 154, 0, 0.76);border-left: 595px solid transparent;z-index: 1;}
.banner:after {position: absolute;background: url(../images/badge-20years-banner.png);width: 202px;height: 248px;right: 9%;bottom:9%;z-index: 1;}
.banner .slick-prev, .banner  .slick-next {width: 45px !important;height: 45px !important;background: #f8b54e !important;border-radius: 3px;}
.banner  .slick-prev:before, .banner  .slick-next:before{color: #252525 !important;}
.banner .slick-prev {left: 1% !important;}
.banner .slick-next {right: 1%;}
.banner .slick-next:before{content: "\f105 ";font-size: 30px;}
.banner .slick-prev:before{content: "\f104 ";font-size: 30px;}
.btn-talk:after{
    border-radius: 3px;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    background: #ffffff;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}
.btn-talk:hover:after {
    opacity: 1;
    height: 100%;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}


/*================== our service css ================*/


.servicebg{
   background-image: url(../images/servicebg.png),url(../images/zinc.png),linear-gradient(to right, #efefef , #efefef );
  background-repeat: no-repeat,no-repeat;
  background-position: top left, bottom;
  padding: 60px 0;
}
.servicebg .container {max-width: 1312px;}
ul.service_list{font-size: 0;text-align: center;margin:60px -25px 0;}
ul.service_list li{width: 39.9%;display: inline-block;padding:0 25px;position: relative;vertical-align: top;}
ul.service_list li .service img{width: 100%;}
ul.service_list li .service {border: 4px solid #ffffff;box-shadow: 0px 1px 11px #bdbbbbd4;overflow:hidden;}
/*ul.service_list li:first-child .service{margin-top: 40px;}*/
ul.service_list li:first-child .shape{background: url(../images/home-traingle.png)no-repeat;width: 195px;height: 234px;position: absolute;top:0;border-top: 5px solid #f8b54e;padding: 30px 25px;left: -78px; transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
ul.service_list li:last-child .shape{background: url(../images/top-traingle.png)no-repeat;width: 195px;height: 234px;position: absolute;border-bottom: 5px solid #f8b54e;padding: 64px 25px 30px 25px;bottom:0px;right: -78px; transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.roof{background: url(../images/sprite.png) right 66%;background-position: -10px -320px;width: 78px;height: 64px;margin:0 auto;float: none !important;}
.shape p{font-size: 26px; line-height: 34px; color: #ffffff;font-weight:700;text-align: center;text-transform: uppercase;clear: both;top: 20px;position: relative;}
.wall{background: url(../images/sprite.png);background-position: -10px -641px;width: 67px;height: 67px;margin:0 auto;float: none !important;}
ul.service_list li:hover:first-child .shape{background: url(../images/home-traingle-orange.png)no-repeat;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;border-top:5px solid #252525;}
ul.service_list li:hover:last-child .shape{background: url(../images/top-traingle-orange.png)no-repeat;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;border-bottom:5px solid #252525;}
ul.service_list li  img{transform: scale(1);-webkit-transform: scale(1);transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;}
ul.service_list li a:hover img{transform: scale(1.2);-webkit-transform: scale(1.2);transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;}
.title{font-size: 40px;font-weight: 600; color: #3b3839;position: relative;text-transform: uppercase;text-align: center;width: 400px;background: transparent;margin: 0 auto;position: relative;}
.title:after,
.title:before {content: "";background: url(../images/sprite.png);position: absolute;width: 96px;height: 30px;}
.servicebg .title:before{background-position: -10px -280px;left:-26%;}
.servicebg  .title:after {background-position: -10px -240px;right: -26%;}
.processbg .title{color: #252525;}

/*=====================  Metal ==============*/

.metal .title{color: #ffffff;}
.metal .title:before{background-position: -10px -280px;left: -26%;}
.metal .title:after{background-position: -10px -240px;right: -26%;}
.metal{background: url(../images/metal-we-use-bg.jpg)no-repeat ;background-size: cover;padding: 60px 0;}
ul.metal_list, ul.cta_listing{text-align: center;margin-top: 60px;}
ul.metal_list li{display: inline-block;width: 30%;position: relative;}
.cirle {position: relative;width: 174px;height: 174px;margin: 0 auto;box-shadow: 0px 0px 60px #f8b54e;border-radius: 100%;}
.cirle img{margin:0 auto;}
.cirle span {font-size: 30px;font-weight: 700;line-height: 174px;text-transform: uppercase;color: #252525;position: absolute;top: 0;left: 0;right: 0;bottom: 0; margin: auto; }
ul.cta_listing li {display: inline-block;vertical-align: top}
.cta_listing .cta_call{width: auto;}
.cta_listing .cta_call p{text-align: left;color: #f8b54e;}
.cta_listing .cta_call p span{color: #ffffff;}
.cta_listing .cta_call:hover p span{text-decoration: underline;color: #f8b54e;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}
.cta_listing .cta_call a .cta_icon {background: #f8b54e;}
.cta_listing li{margin:0 48px;position: relative;}
.cta_listing li:not(:last-child):after {content: "";position: absolute;width: 2px;height: 60px;background: #f8b54e;top: 2px;right: -48px;}
.metal .container{max-width: 1000px;}


/*=====================  welcome ==============*/

.welcome{padding:98px 0;}
.top_smith{width: 18.27%;float: left;position: relative;}
.top_smith:after{content: "";position: absolute;top: 49px;right:0;height: 293px;border-right:4px double #ededed;}
.welcome_box {width: 59.50%;float: left;padding:50px 30px 0 40px;}
.right_box{width: 22.22%;float: left;padding-top: 50px;}
.welcome_box .sub_title{font-size: 30px;font-weight:600;color: #3b3839; text-align: left;margin-bottom: 25px;}
span.txttitle{color: #f3b14d;font-weight:700; margin-bottom: 30px;display: block;line-height: 24px;}
.welcome_box h4{font-weight:700;margin-bottom: 25px;color: #3b3839;}
.welcome_img{position: relative;}
.welcome_img:after{content: "";position: absolute;width: 11px;height: 204px;background: #f8b54e;right:0;top:20px;}
.welcome_box p {
    font-weight: 400;
    line-height: 24px;
    color: #3b3839;
}

/*================= our process ================*/


.processbg .title:before{background-position: -10px -160px;left: -26%;}
.processbg .title:after{background-position: -10px -200px;right: -26%;}
.processbg{background:url(../images/our-process-bg.jpg)no-repeat;background-size: cover;padding: 60px 0;}
.step_inner{width: 100%;margin: 0 auto;padding: 0 15px}
ul.process_step li{display: inline-block;padding: 0 15px;width: 20%;}

ul.process_step li .stepbox{background: #ffffff;display: block;overflow:hidden;position: relative;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o--moz-transition: all 0.3s linear;}
ul.process_step li .stepbox:hover{box-shadow: 3px 4px 5px rgba(35, 35, 35, 0.35);transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o--moz-transition: all 0.3s linear;}
.step_box .pencil:before , 
.step_box .serach:before,
.step_box .target:before,
.step_box .rpordt:before,
.step_box .st_qut:before
{content: "";position: absolute;    background: url(../images/sprite2.png);right: 0;left: 0;margin: 0 auto;top: 40%;}
.step_box .pencil:before{ background-position: 38% 64%;width: 74px;height: 80px;}
.step_box .serach:before{background-position: -10px -92px; width: 75px; height: 76px;}
.step_box .rpordt:before{ background-position: -10px -268px; width: 71px; height: 81px;}
.step_box .target:before{background-position: -10px 0px; width: 82px; height: 82px; }
.step_box .st_qut:before{background-position: -4px -348px; width: 82px; height: 82px;}

ul.process_step{text-align: center;margin:70px -29px 0;font-size: 0;}
.step_box {padding: 30px;border-bottom: 1px solid #ededed;height: 215px;position: relative;}
.step_title{font-size: 17px;margin: 40px 0;font-weight:700; color: #3b3839;}
.step_traingle {
    background: url(../images/step.png)no-repeat;
    width: 82px;
    height: 67px;
    position: absolute;
    top: -6px;
    left: 0;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    padding: 18px 10px 0 4px;
    text-align: center;
    -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
}
ul.process_step li .stepbox:hover .step_traingle{
  top: 0;
  transition: all 0.3 linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
}
.steparrow {width: 38px;height: 38px;background: #f8b54e;border-radius: 100%;text-align: center;color: #ffffff;font-size: 20px;line-height: 36px;position: absolute;right: 0;left: 0;margin: 0 auto;bottom: 84px;}


.steparrow .fa-angle-double-right{-webkit-animation: arrowbounce 1.5s infinite;  animation: arrowbounce 1.5s infinite;}
@keyframes arrowbounce {0%, 20%, 50%, 80%, 100% { transform: translateX(0);}40% {transform: translateX(-3px);}60% {transform: translateX(1px);}}
ul.process_step li{vertical-align: top;}

/*================= Get in touch ================*/


.home_getform{position: relative;padding: 60px 0 0;}
.home_getform:before {content: "";position: absolute;top: 0;right: 0;left: 0;background: url(../images/servicebg.png) #efefef no-repeat;background-size: cover;padding: 60px 0;height: 89%;background-position: 100%;}
.home_getform .badge-img img {height: auto;}
.home_getform .container, .testimonial .container{max-width: 1374px;}

/*================= testimonial css ================*/

.testimonial_box {width:86.53%;background: #f8b54e;border-top: 5px solid #fff;padding: 50px;float: right;box-shadow:2px 1px 9px #67636363;margin-top: -140px;}
.title_box{width: 32.19%;float: left;}
.testimonial_content{width: 67.80%;float: left;}
.title_box .title {text-align: left;padding: 0;margin: 45px 0 50px;width: auto;color: #232323;}
.title_box .title:before, .title_box .title:after{content: none;}
.review p{font-weight:400;color: #232323;padding-bottom: 30px;border-bottom:3px double #d29c4a;margin-bottom: 30px;}
.review span.name{font-size: 24px;color: #232323;font-weight:600;text-transform: uppercase;}
#reviews .slick-prev:before {content: '\f053 ';font-family: 'FontAwesome';}
#reviews .slick-next:before {content: '\f054 ';font-family: 'FontAwesome';}
#reviews .slick-prev, #reviews .slick-next {width: 30px;height: 30px;color: #232323;background: #fff;border-radius: 100%;top: inherit;bottom: -17px;line-height: 40px;font-weight: bold;}
.slick-prev {left: 90% !important;}
.title_box img{margin-left: 10px;}
#reviews .slick-prev:hover, #reviews .slick-next:hover{background: #efefef;transition: all 0.4s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;-o-transition: all 0.4s linear;}
.partner_inner.our_partner{margin-top: 30px;}

#reviews .slick-prev:before, 
#reviews .slick-next:before {
    font-size: 10px;
    color: #232323;
}


/*================== our project css ================*/

.project{  padding: 60px 0;}
.project .title:before{background: url(../images/sprite.png);background-position: -10px -40px;left: -26%;}
.project .title:after{background: url(../images/sprite.png);background-position: -10px -0px;right: -26%;}

.project_gallery {float: left;width: 100%;text-align: center;margin:60px 0 30px;}
.grid-col1 {float: left;width: 30.86%;}
.grid-col2 {display: inline-block;vertical-align: top;width: 36.7%;}
.grid-col3 {float: right;width: 30.92%;}
.grid-col4 {float: left;width: 49.69%;}
.grid-col4, .grid-col5 {margin: 13px 0;overflow: hidden;}
.grid-col5 {float: right;width: 43.6%;}
.middle-grid-img1 {width: 100%;height: auto;margin-bottom: 13px;display: block;}
.middle-grid-img2, .middle-grid-img3 {height: auto;width: 48.65%;float: left;}
.pull-left {float: left;}
.pull-right {float: right;}
.grid-col1 img {height: auto;}
.detail{position: absolute;bottom:0;left:0;right:0; margin:0 auto; width: 350px;z-index: 1;height: 50px;transition: all 0.4s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;-o-transition: all 0.4s linear;}
.detail .pro_title{font-size: 20px;color: #ffffff;font-weight:600;padding: 15px 0;}
.project_gallery li a{display: block;position: relative;overflow: hidden;}
.project_detail:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;width: 100%;height: 55%;background: linear-gradient(to bottom, transparent 0%, #000 100%);transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;}
.project_gallery li a:hover .project_detail:after {height: 100%;background: rgba(255, 154, 0, 0.76);transition: all 0.3s linear;-webkit-transition: all 0.3s linear;}
.project_gallery li a:hover .detail{text-align: center;position: absolute;top: 0%;left: 0;right:0;bottom:0;margin: auto;transition: all 0.3s linear;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;-o-transition: all 0.4s linear;}
.project_gallery li a:hover .detail:before{
  content: "";
  position: absolute;
  width: 55px;
  height:55px;
  border-right:1px solid #000000;
  border-top:1px solid #000000;
  top:0;
  right:0;
}
.project_gallery li a:hover .detail:after {
    content: "";
    position: absolute;
    width: 55px;
    height: 55px;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    bottom: -33px;
    left: 0;
}
.project_gallery li.grid-col2 a:not(:first-child) .detail{
  width: auto;
}
.project_gallery li.grid-col2 a:not(:first-child) .detail:before{
  right:15%;
}
.project_gallery li.grid-col2 a:not(:first-child) .detail:after{
  left:15%;
}
.view_btn {
    background: #252525;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    padding: 0px 15px 0 0;
    border-radius: 3px;
    font-weight: 600;
    display: block;
    z-index: 0;
    overflow: hidden;
    line-height: 45px;
    width: 204px;
    margin: 0 auto;
}
.view_btn span {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}
.view_btn .traingle_btn {
    background: url(../images/traingle.png);
    width: 40px;
    height: 46px;
    margin-left: -1px;
}
.project .view_btn span:before{
  background-position: -10px -774px; width: 18px; height: 18px;
}
.view_btn span:before {
    content: "";
    position: absolute;
    left: 4%;
    background: url(../images/sprite.png);
    top: 14px;
    float: none;
}
.view_btn:after {
    position: absolute;
    content: '';
    background: url(../images/btn.png);
    width: 0;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    background-position: center right;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    z-index: -1;
}
.view_btn:hover:after{
    opacity: 1;
    width: 120%;
    background: url(../images/btn-orange.png);
    background-position: center right;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
}
.view_btn:hover{
  color: #252525;
   transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
}

/*-----our project css effect---------*/
.project_gallery li{position: relative;overflow-x: hidden;}
.project_gallery li a:hover img {transform: scale(1.1);}
.project_gallery li a img {width: 100%;height: auto;transform: scale(1);transition: all 0.5s ease 0s;}
.project_gallery li a:hover, .project_gallery li a:hover .detail .pro_title{color: #000000;}
.project_gallery li a:hover .detail .pro_title{font-size: 24px;}
.detail p{font-weight:400;color: #000000;}
.project_gallery li a:hover .detail .pro_title{padding-bottom: 0px;}
/*UI FIXES*/
.aws {text-align: center;}
.aws .title{display: inline-block;position: relative;width: auto;}
.aws .title:before{right: 100%;margin-right: 38px;top: 0;left: auto;background-position: -10px -40px;}
.aws .title:after{left: 100%;margin-left: 38px;top: 0;right: auto;background-position: -10px -0px;}
.project_gallery li a:hover .detail{/*top: -8%;*/height: 65px;}
.project_gallery li a:hover .detail:after{bottom: -15px;}
.welcome_box p:not(:last-of-type){margin-bottom: 15px;}
.aws-content{margin: 60px 0 30px;}
.aws-content .areas_map{width: 33%;float: right;}
.aws-content .welcome_box{width: 67%;float: left;text-align: left;}
.area_scroll {
    max-height: 450px;
    padding: 0 30px;
}
.area_scroll p a {
    color: #f8b54e;
    display: inline-block;
    font-weight: 500;
}
.area_scroll h4 {
    font-weight: 700;
    margin-bottom: 15px;
    color: #3b3839;
    margin-top: 30px;
    font-size: 20px;
}
.arealist li {
    width: 20%;
    float: left;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
	font-weight: 400;
}
.arealist li:before {
    content: "\f105";
    position: absolute;
    display: inline-block;
    font-family: "FontAwesome";
    font-size: 14px;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: #000000;
    text-align: center;
    font-weight: 600;
    left: 0;
    top: 4px;
    line-height: 100%;
}
.arealist li a:hover{
    color: #f8b54e;
}
.area_scroll p a:hover {
    color: #000;
}
.arealist li.active{
    color: #f8b54e;
    font-weight: 500;
}

.arealist li.active:before{
    color: #f8b54e;
}
.area_scroll h2 {
    font-size: 22px;
    margin-bottom: 10px;
    margin-top: 30px;
}
ul.arealist {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.banner_img img{width: 100%;}