body{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  background: #ffffff;
}
hr{
  width:10%;
  margin:0 auto;
  margin-bottom:7px;
  height:3px !important;
  color: grey;
}
.hr-left{
  width:10%;
  margin-bottom:7px;
  height:3px !important;
  color: #FCE181;
  float:left;
}
.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%;
}

.no-padding{
  padding:0px !important;
}

.top-bar{
  background: #FFF;
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
  border-top: solid 7px #056839;
}

.top-bar a{
  color: #aaa;
  text-decoration: none;
  font-size: 13px;
}

.logo
{
  padding:5px;
}
.nav-item a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #006696;
  padding-left: 17px !important;
}

.nav-item a:hover {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: grey;
  padding-left: 17px !important;
}

.nav-item a:active {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: grey;
  border-bottom: solid 2px red;
}

.dropdown-menu .dropdown-item{
  z-index: +2000 !important;
}

.para{
  color: #808080;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 20px;
}

.light-border {
  border:solid 3px #ccc;
  border-radius: 5px;
}
.small-heading{
  font-size: 15px !important;
    font-family: 'Montserrat', sans-serif;
  font-weight: 600 !important;
}
.small-txt{
  font-size: 13px !important;
}

.icon-box{
  border:solid 1px #ccc;
  border-radius:7px;
  background:#fafafa
}
.thick-border {
  border-bottom: solid 2px #000;
}
.inner-slider {
  padding: 30px;
  margin-top: 15px;
  /* background: #ccc;
  border:solid 5px #056839; */
}

#header{
  border-bottom: solid 3px #006696;
  background: #ffffff;
}

#header i{
  font-size: 14px;
  color: #000000;
}

.carousel-item{
  z-index: -1;
}

.carousel {
  z-index: -10;
}

#punch-line {
  background: #056839;
  padding: 30px 0 30px 0;
  border-bottom: solid 5px #F9F871;
}

#punch-line h3{
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  font-size: 30px;
  line-height: 36px;
}

#range-products {
  background: #ffffff;
  padding: 50px 0 80px 0;
}

#range-products i{
  font-size: 80px;
}

#range-products h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 36px;
}

#range-products-hydra{
  padding:30px 0 30px 0;
  background: #fafafa;
}

#range-products-hydra h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#range-products-hydra img {
  border:solid 2px #ccc;
}

.card-title{
  color: #056839;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 18px;
}
.card-text{
  font-size: 14px;
  color: 	#808080;
}

#about{
  background: #165060;
  padding: 30px 0 30px 0;
}

#about h1{
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 36px;
}
#about p{
  color: #a3c2c2;
}

#team{
  background: #0B6B3B;
  padding: 30px 0 30px 0;
}
#team h4{
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-weight: 500;
  font-size: 26px;
}

#team h1{
  font-family: 'Montserrat', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 36px;
}
#team p{
  color: #fafafa;
}

#why-we{
  padding: 30px 0 30px 0;
}

#why-we h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 36px;
}

#why-we h4{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

#why-we i{
  font-size: 40px;
  color: #056839;
}

#why-we .text{
  font-size: 14px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
}

#footer{
  padding: 30px 0 30px 0;
  background: #204963;
  color: white;
  border-top: solid 5px #F9F871;
}

#footer h3{
  color: #F9F871;
  font-size: 21px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

#footer h4{
  font-size: 19px;
  color: #B38AAE;
  font-style: italic;
}

#footer p{
  color: #eee;
  font-size: 15px;
}

#footer a{
  font-size: 40px;
  color: white;
  margin-left: 15px;
}

#footer-border{
  background: #3e5869;
  color: white;
}

#footer-border small{
  font-size: 13px;
}

#import-export{
  padding: 30px 0 30px 0;
  background: #fcfcfc;
}

#import-export h3{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

#breadcrum{
  background-image: radial-gradient(circle, #006696, #006a8d, #006c7f, #006c6d, #006b5a, #147757, #2c8250, #468c46, #6fa84f, #99c359, #c7de64, #f9f871);
  background-image: linear-gradient(to left top, #006696, #006a8d, #006c7f, #006c6d, #006b5a, #147757, #2c8250, #468c46, #6fa84f, #99c359, #c7de64, #f9f871);
  padding: 30px 0 30px 0;
}

#breadcrum h3 {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.breadcrum-dull-txt{
  font-size: 18px;
  color: #bbb;
}

#sub-page-content{
  padding: 30px 0 30px 0;
}

#sub-page-content h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#sub-page-content p{
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

#sub-page-content figcaption{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

#what-we-do{
  padding: 30px 0 30px 0;
  background: #165060;
}

#what-we-do h3{
  color: #F9F871;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#what-we-do p{
  color: #a3c2c2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}
#what-we-do i{
  color: #F9F871;
  font-size: 20px;
}

#q-a{
  padding: 30px 0 30px 0;
  background: #165060;
}

#q-a h3{
  color: #F9F871;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#q-a p{
  color: #a3c2c2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

#vision-mission{
  background: #394955;
  padding: 30px 0 30px 0;
}

#vision-mission h3{
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#vision-mission p{
  color: #a3c2c2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

#fabrication{
  padding: 30px 0 30px 0;
  background: #fafafa;
}

#fabrication h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#fabrication p{
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

#client-img{
  padding: 30px 0 30px 0;
}

#hse {
  padding: 30px 0 30px 0;
}

#hse h3{
  color: #006696;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

#hse p{
  color: #484848;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

#contact h4{
  font-size: 19px;
  color: #056839;
  font-style: italic
}

#contact i {
  color: #006696;
}


/* Style for percentage loading */
.circle-wrap {
  width: 150px;
  height: 150px;
  background: #006696;
  border-radius: 50%;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: red;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(126deg);
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(126deg);
  }
}

.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 10px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 500;
  font-size: 1em;
}
.inside-circle p{
  margin-top: 50px;
}

/* percentage loading end here */

/* Social Media icon hover effects*/
.fa-facebook-square:hover{
  color: #4267b2;
}
.fa-instagram-square:hover{
  color: #3f729b;
}
.fa-youtube-square:hover{
  color: #282828;
}
.fa-whatsapp-square:hover{
  color: #4fce5d;
}
.fa-twitter-square:hover{
  color: #1DA1F2;
}
/* Social Media effect end here */

/* Overlay Effects */
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.75);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
border-radius: 7px;
}

.overlay p {
  color: #ffffff;
  font-size: 13.5px;
  text-align: center;
  padding: 7px;
  background: transparent;
  border-radius: 7px;
  margin: 0 auto;
  margin-top: 60px;
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:left;
position:relative;
font-size:15px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
/* End Overlay here */

@media (max-width: 575.98px) {
   .top-bar {
     background: #ccc;
   }
}