@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,900 | Oswald:400' );

html, body{height:100%;}
*{padding:0px; margin:0px; box-sizing: border-box; outline:none; list-style:none;}
ul, li{margin:0px; padding:0px;}
img{border:0px; max-width:100%;}
a{transition:all 0.3s ease-out 0s;text-decoration:none;} a:hover{text-decoration:none;}
a:hover img{opacity:.9;transition:all 0.3s ease-out 0s;}
.clr{clear:both;}
.f-right{float:right!important;} .f-left{float:left!important;}
h1, h2, h3, h4, h5, h6{margin:0;}
.marT1{margin-top:5px;} .marT2{margin-top:10px;} .marT3{margin-top:15px;} .marT4{margin-top:20px;} .marT5{margin-top:25px;} .marT6{margin-top:30px;} .marT7{margin-top:40px;}
.marB1{margin-bottom:5px;} .marB2{margin-bottom:10px;} .marB3{margin-bottom:15px;} .marB4{margin-bottom:20px;} .marB5{margin-bottom:25px;} .marB6{margin-bottom:30px;} .marB7{margin-bottom:40px;}
.padT1{padding-top:5px;} .padT2{padding-top:10px;} .padT3{padding-top:15px;} .padT4{padding-top:20px;} .padT5{padding-top:25px;} .padT6{padding-top:30px;} .padT7{padding-top:40px;}
.padB0{padding-bottom:0px!important;} .padB1{padding-bottom:5px;} .padB2{padding-bottom:10px;} .padB3{padding-bottom:15px;} .padB4{padding-bottom:20px;} .padB5{padding-bottom:25px;} .padB6{padding-bottom:30px;} .padB7{padding-bottom:40px;}
.width30, .width40, .width50, .width55, .width60, .width65, .width70, .width80, .width85, .width90{margin-left:auto; margin-right:auto;}
.width30{width:30%;} .width40{width:40%;} .width50{width:50%;} .width55{width:55%;} .width60{width:60%;} .width65{width:65%;} .width70{width:70%;} .width80{width:80%;} .width85{width:85%;} .width90{width:90%;}
.blue{color:#07222b!important;} .darkblue{color:#175183!important;} .red{color:#d82a2c!important;} .green{color:#27ac60!important;} .white{color:#fff!important;} .orange{color:#ff4900!important;} .gray{color:#424242!important;} .yellow{color:#ffcc00!important;} .black{color:#000!important;}
.linkedinblue{color:#0077B5}
body{background:#fff; font:400 14px "Raleway",Arial,sans-serif; color:#07222b;}
.container{max-width:1200px; padding-left:0; padding-right:0;}
.wrapper{max-width:1000px;}
.header{padding:25px 0; position:relative; box-shadow:rgba(0,0,0,.2) 0 0 20px; z-index:1; background:#27ac60;}
.header .row{align-items:center;}
.logo{width:22%; float:left;}
.lang{flex:inherit; max-width:none;}
.nav{float:right; max-width:77%;}
.nav ul{display:flex; justify-content: right; width:100%;}
.nav .menu{margin-left:auto;}
.nav ul li{ padding:0 2px 0 2px; position:relative;}
.nav ul li a{display:block;padding:17px 25px; border:1px solid transparent;  text-align:center; color:#fff;font-size:15px;font-weight:600; text-transform:uppercase; transition:all 0.3s ease-out 0s; font-family:Raleway;}
.nav ul li a:hover, .nav ul li:hover a{background:#000; color:#fff;border-radius:500px;}

.nav ul li.menu-link a{color:#27ad60; border-radius:500px; background:#fff; }
.nav ul li.menu-link a:hover{background:#000; color:#fff;}
.banner{background:url(../images/hero.jpg) no-repeat center top; background-size:cover; min-height:675px; align-items:center; display:flex;}

.banner .row{align-items:center;}
.banner h1{font-size:66px; color:#fff; font-weight:700; font-family:Oswald;}
.banner h2{background:#27ae61; color:#fff; text-transform:uppercase; display:inline-block; padding:5px 10px; margin-top:20px; font:700 22px Raleway; word-spacing:1px;}
.banner h3{color:#fff; font:400 26px/38px Raleway; max-width:88%; padding:10px 0 30px;}
.banner h1 img{vertical-align:baseline;}
.btn-primary{background:#27ae61; border:0; border-radius:500px!important; text-transform:uppercase; letter-spacing:1px; padding:22px 45px 20px; text-align:center; color:#fff; font:600 14px Raleway; display: inline-block;}
.btn-secondry{background:#000; padding:22px 25px 20px}
.btn-primary:hover{background:#000;}
.btn-secondary{background:#00beff; border:0; border-radius:500px!important; font-size:16px; font-weight:500; text-transform:uppercase; padding:15px 30px; text-align:center; min-width:210px;margin:0 5px;}
.btn-secondry:hover{background:#fff; color:#000;}
.graySec{padding:70px 0; position:relative;}
.blueSec{padding:70px 0; background:#fff; position:relative;}
.blueSec h2{z-index:1; position:relative;}
.blueSec::before{content:""; position:absolute; left:0; top:0; width:100%; height:373px;background:#fff url(../images/pattern.png) no-repeat center center; z-index:0; background-size:cover;}
.graySec::before{position:absolute; width:100%; height:100%; background:url(../images/pattern.png) repeat 0 0; content:""; z-index:0; left:0; top:0; opacity:.3;}
.half{float:left; width:50%;}
.common h1, .common h2, .common h3, .common h4{font-family:Oswald;}
.common h3{font-size:32px; font-weight:400;}
.common h2{font-size:55px; font-weight:400; color:#27ae61;}
.common h4{font-size:30px; font-weight:300;}
.common h5{font-size:17px; line-height:26px; font-weight:400; color:#07222b;}
.common h6{font-size:16px; line-height:26px; font-weight:400;}
.common h6.smallH6{font-size:15px; line-height:20px; color:#4e4e4e;}
.common p{font-size:16px; line-height:28px; font-weight:400; color:#1b1b1b; padding-bottom:20px; margin:0;}
.img-shadow{background:#fff; padding:10px; box-shadow:rgba(0,0,0,.3) 0 0 20px;}
.item-center{align-items:center;}



.btn-link{border:0; color:#00b140; border-radius:0; font-size:16px; font-weight:700; text-transform:uppercase; padding:0 0; text-align:center;}
.btn-link i{background:url(../images/arrow-right-green.png) no-repeat 0 0; width:13px; height:21px; display:inline-block; vertical-align:middle; margin-left:10px; margin-top:-5px;}
.btn-toolbar:hover{background:#00b140; color:#fff;}




.footer{background:#2c2c2c; padding:70px 0 50px; color:#fff;}
.footer h4{font-size:20px; font-weight:700; padding-bottom:15px; color:#fff;}
.footer ul li a, .footer p{font-size:15px; line-height:22px; font-weight:400; color:#fff; display:block; padding:8px 0; margin:0;}
.footer a{color:#fff;}
.footer .contact a{padding:0 15px 0 15px; color:#fff;}
.footer ul li a:hover, .footer a:hover{color:#02feb5;}
.footer .contact{padding:0px 0 100px;}
.social{padding-bottom:20px; color:#fff; display:none;}
.social a{font-size:11px; font-weight:600; text-align:center; color:#fff;display:inline-block; padding:0 10px;}
.social .fa{line-height:36px;font-size:26px; display:block;}
.social a:hover{color:#02feb5;}
.menu-bar {display: none;float: right;margin: 0px 5px 0 auto; z-index: 9999;}
.fa-bars {cursor: pointer;display: none; font-size:30px; color:#333; text-align:center;}
.overlay{width:100%; position:fixed; z-index:0; background:rgba(0,0,0,.5); height:100%; right:0px; top:0px; display:none;}
.lGraySec{background:#fafafa; padding:70px 0;}
.we-do{display:flex; flex-wrap:wrap; justify-content: center;}
.we-do li{max-width:33%; flex:0 0 33%; margin:0 1px 1px 0; background:#02feb5 url(../images/pattern.png) repeat 0 0; padding:70px 80px;}
.we-do li .icon{display:block; width:114px; height:114px; margin:0 auto 20px; position:relative;}
.we-do li .icon::after{display:block; width:100%; height:100%; content:"";}
.we-do li .icon.icon1::after{background:url(../images/icon1.png) no-repeat 0 0;}
.we-do li .icon.icon2::after{background:url(../images/icon2.png) no-repeat 0 0;}
.we-do li .icon.icon3::after{background:url(../images/icon3.png) no-repeat 0 0;}
.we-do li .icon.icon4::after{background:url(../images/icon4.png) no-repeat 0 0;}
.we-do li .icon.icon5::after{background:url(../images/icon5.png) no-repeat 0 0;}
.greenSec{background:#27ae61; padding:70px 0; color:#fff;}
.service-list{padding:40px 0 0 0; counter-reset: css-counters 0;}
.service-list li{padding:0 0 18px 45px; font:400 18px Raleway; color:#000; position:relative;}
.service-list li::before{font-family:"Oswald"; position:absolute; left:0; top:-2px; border:2px solid #000; width:30px; height:30px; border-radius:100px; text-align:center; counter-increment: css-counters; content: counters(css-counters, ".") " "; z-index:1; background:#02feb5 url(../images/pattern.png) repeat 0 0;}
.service-list li::after{width:2px; content:""; height:100%; background:#000; position:absolute; left:14px; top:26px; z-index:0;}
.service-list li:last-child::after{display:none;}
.whiteSec{background:#fff; padding:50px 0 50px;}

.steps{flex-wrap:wrap; display:flex; justify-content:center; margin-top:40px;}
.steps li{width:18%; margin:10px 1%; position:relative; padding:0 8px;}
.steps li::before{content:""; width:85px; height:52px; background:url(../images/arrow.png) no-repeat right 0; position:absolute; right:-50px; top:70px;}
.steps li:nth-child(even)::before{background:url(../images/arrow1.png) no-repeat right 0;}
.steps li:last-child::before{display:none;}
.steps li h6{font-size:21px; font-weight:400; color:#2b2b2b; padding:10px 0;}
.steps li p{font-size:15px; line-height:20px; font-weight:600; color:#fff; padding:5px 0 0;}
.steps li span{width:160px; height:166px; display:block; margin:0 auto;}
.steps li span.step01{background:url(../images/step-01.png) no-repeat 0 0;}
.steps li span.step02{background:url(../images/step-02.png) no-repeat 0 0;}
.steps li span.step03{background:url(../images/step-03.png) no-repeat 0 0;}
.steps li span.step04{background:url(../images/step-04.png) no-repeat 0 0;}
.steps li span.step05{background:url(../images/step-05.png) no-repeat 0 0;}

.serviceBox{background:#fff; box-shadow:rgba(0,0,0,.2) 0 0 30px; border-radius:7px; overflow:hidden; padding:0 0 30px 0; margin:0 1%; max-width:23%;}
.serviceBox h5{font-weight:700; text-transform:uppercase; color:#2e2e2e; padding:45px 15px 20px;}
.serviceBox p{color:#272727; padding:0 15px; line-height:24px; font-size:16px;}
.serImg{position:relative;}
.serImg img{width:100%;}

.serImg span{position:absolute; bottom: -28px;z-index: 1;display: block;left: 0; width: 100%; }
.serImg span img{width:auto;}
.whySec{background:url(../images/why-ecolade.jpg) no-repeat 0 0; padding:70px 0; position:relative; min-height:600px; background-size:cover;}
.whyBox{position:relative;}
.whySec::before{content:""; display:block; width:100%; height:100%; right:0; top:0; background:url(../images/transparent-sec.png) no-repeat 125% -130px; position:absolute;}
.whySec p{font-size:18px;}
.copyright{border-top:1px solid #4e4e4e; padding-top:30px;}
.contactSec{background:#f6f6f6; padding:70px 0;}
.ver-center {align-items: center;justify-content: center;}
.formBox{background: #fff;box-shadow: 4px 4px 42px rgb(0 0 0 / 9%); padding:50px;}
.formBox span{position:relative; display:block;}
.formBox .form-control {padding: 15px 12px 15px 40px!important; height: calc(2em + .95rem + 2px);}
.formBox textarea.form-control{height:auto;}
.formBox span::after{font-family:"FontAwesome";position: absolute;left:15px;top: 10px;display: block;color: #27ac60;font-size: 17px;}
.formBox span.name::after{content:"\f007";}
.formBox span.mail::after{content:"\f003";}
.formBox span.phone::after{content:"\f095";}
.formBox span.message::after{content:"\f135"; top: 13px;}
.formBox span.code::after{content:"\f029";}
.contactSec h4{font-size:20px; text-transform:uppercase; font-weight:500; color:#27ac60;}
.contactSec p{padding-bottom:40px;}
.contactSec h5{font-weight:600; font-size:20px;}
.inner{min-height:270px; background-position:center center;}
.wSec p{padding-bottom:15px;}
.wSec h4{font-size:17px!important;}
.imgshadow{box-shadow:rgba(0,0,0,.3) 0 0 30px; background:#fff; padding:15px; border-radius:10px;}
.teams img{border-radius:100%;box-shadow:rgba(0,0,0,.3) 0 0 30px; background:#fff; padding:10px; }
.teams span{font:600 20px Raleway; text-transform:uppercase; background:#fff; padding:5px 15px;margin-top:-25px; display:inline-block; min-width:130px; border-radius:100px;box-shadow:rgba(0,0,0,.3) 0 0 30px;}
@media only screen and (max-width: 2500px){
.whySec::before{background-position:145% -130px;}
}
@media only screen and (max-width: 2000px){
.whySec::before{background-position:185% -130px;}
}
@media only screen and (max-width: 1860px){
.whySec::before{background-position:270% -130px;}
}
@media only screen and (max-width: 1760px){
.whySec::before{background-position:600px -130px;}
}
@media only screen and (max-width: 1660px){
.whySec::before{background-position:600px -130px;}
}
@media only screen and (max-width: 1560px){
.whySec::before{background-position:470px -130px;}
}
@media only screen and (max-width: 1200px){
.container{padding-left:15px; padding-right:15px;}
.row{margin-left:0; margin-right:0;}
.whySec::before{background-position:370px -130px;}
.width70, .width80{width:100%;}
}

@media only screen and (max-width: 1100px){
.header{padding:0px 0 5px;}
.nav{flex:inherit; max-width:none;}
.menu-bar{display:inline-block;}
.nav .menu{display: none; background:#111; box-shadow:0 -8px 6px 0 #000 inset;}
.fa-bars{display:block; float:right; color:#fff;}
span.fa-bars::before{display:none;}
.menu .fa-bars{margin:10px 20px;}
.nav ul{clear:both; display:block; }
.nav ul li{border-bottom: 0 none;float: none; display:block; text-align:left; padding:0px 0px; border-radius:0px;border-bottom: 1px solid #222;}
.nav ul li a, .nav ul li.last a, .nav ul li a.active{padding:16px 20px; color:#fff; border:0px;text-align:left; border-radius:0!important;}
.nav ul li ul li a{padding:15px 10px 15px 30px; border-bottom:0;}
.nav ul li ul li{background:#222; border-bottom:1px solid #000;}
.nav ul li:hover ul li a{border-bottom:0;}
.nav .menu{position:fixed; top:0px; right:0px; display:none; width:340px; z-index:999999!important; height:120%; overflow:scroll;}
.nav ul li.menu-link a{border-radius:0;}
.nav .menu ul{overflow:auto;height:100%; }
.nav ul li.last{padding:0px;}
.nav ul li a:hover{color:#fff; background:#27ac60; border:0px;}
.nav ul li:hover a{border:0px;}
.nav ul li ul{position:static; top:0px; left:0px;}
.nav ul li:hover ul{display:none;}
.nav ul li ul{width:100%; background:none; box-shadow:none;}
.nav ul li a .fa{float:right; font-size:14px; margin-top:3px}
.logo{padding:10px 0 10px 0px; width:60%;}
.nav ul li.menu-link a {border:0;}
.we-do li{padding:50px 40px;}
.whySec::before{background-position:300px -130px;}
}

@media only screen and (max-width: 991px){
.col-lg-6{padding-top:15px; padding-bottom:15px;}
.ml-auto{margin-left:15px!important;}
.footer .col-lg-7{order:3; padding-top:30px;}
.whySec::before{background-position:-200px -130px;}
}

@media only screen and (max-width: 800px){
.width65{width:100%;}
.we-do li{padding:30px 10px;}
.clientSec{padding:40px 30px;}
.serviceBox{max-width:48%; flex:0 0 auto; margin:8px 1%;}
}

@media only screen and (max-width: 767px){
.order{order:1;}
.common h2{font-size:35px;}
.steps li{width:100%; margin:25px 0;}
.steps li::before{display:none;}
.footer .contact{text-align:left!important; padding-bottom:50px;}
.we-do {padding:0px 20px;}
.we-do li{max-width:330px; flex:0 0 330px; margin:0 2px 4px; padding:50px 20px;}
.common h3{font-size:26px;}.clientSec h3{font-size:20px;}
.common h4{font-size:22px;}
.banner h1{font-size:40px;}
.banner{background-position: left center; min-height:500px; padding:40px 0;}
.teams .col-md-4{padding-bottom:30px;}
}

@media only screen and (max-width: 500px){
.banner{background-position: 80% top; min-height:500px; padding:40px 0; position:relative;}
.banner::before{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(7, 46, 25, .6);}
.serviceBox{max-width:98%;}
.footer .col-lg-4{padding-bottom:25px;}
.banner{text-align:center;}
.banner h1 img{max-width:200px; margin-top:10px;}
.banner h2{font-size:17px;}
.banner h3{font-size:18px; line-height:26px; max-width:100%;}
.btn-primary{padding:15px 35px;}
.inner{min-height:200px;}
.formBox{padding:30px; margin-top: -30px;}
}

.content {
  margin-top: 40px;
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

.collapsible2 {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible {  
  cursor: pointer;  
  background-color: transparent;
}


.active, .collapsible:hover {  
  background-color: transparent;
}