*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1,h2,h3,h4,h5, a, label, input, textarea, button{
  font-family: 'Muli', sans-serif;
}

header{
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 1;
}

.banner{
	position: relative;
	background-position: center;
	-webkit-background-size: cover;
	background-size: cover;
    width: 100%;
    max-width: 1700px;
    top: 20px;
    margin: auto;
    height: 450px;
    color: #fff;
}

.banner img{
  width: 100%;
  height: 200px;
  position: absolute;
  top: 52px;
  left: 0;
  z-index: -2;
  object-fit: fill;
}

.section-header{
    position: relative;
    text-align: center;
    top: -10em;
    position: relative;
}
.section-header h2{
    color: #505866;
    font-size:34px;
    font-weight: 500;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-family: 'Muli', sans-serif;
}
.section-header h2 span{text-transform: lowercase;}
.section-header p{
    font-size:16px;
    font-family: 'Muli', sans-serif;
}

.works{padding: 0 0 90px;}
.works-content {margin-top: -9em;}

.single-how-works{
    text-align: center;
    padding:50px 42px;
    border-radius: 3px;
    box-shadow: 0 0px 5px rgba(71,71,71,.2);
    margin-bottom: 30px;
    -webkit-transition: .3s linear; 
    -moz-transition:.3s linear; 
    -ms-transition:.3s linear; 
    -o-transition:.3s linear;
    transition: .3s linear;
    font-family: 'Muli', sans-serif;
}

.single-how-works-icon {
    display: inline-block;
    color: #50616c;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background: #eef2f6;
    border-radius: 50%;
}
.single-how-works h2  {
    font-size:  24px;
    margin: 35px 0 20px;
    color: #24a123;
    
}

.single-how-works h2 a span {text-transform:  lowercase;}
.single-how-works p {margin-bottom: 25px;text-transform: initial;}

.single-how-works-icon [class^="flaticon-"]:before,.single-how-works-icon [class*=" flaticon-"]:before,.single-how-works-icon [class^="flaticon-"]:after,.single-how-works-icon [class*=" flaticon-"]:after {font-size: 50px; color: #000;}
.single-how-works:hover .single-how-works-icon [class^="flaticon-"]:before,.single-how-works:hover .single-how-works-icon [class*=" flaticon-"]:before,.single-how-works:hover .single-how-works-icon [class^="flaticon-"]:after,.single-how-works:hover .single-how-works-icon [class*=" flaticon-"]:after {color:#6CE143;}

.welcome-hero-btn.how-work-btn {
    display: inline-block;
    margin: 0;
    width: 100px;
    height: 35px;
    font-size: 12px;
    background: transparent;
    color: #767f86;
    border: 1px solid #d3d6d9;
    border-radius: 3px;
}

.single-how-works:hover h2 ,.single-how-works:hover p{color: #fff;}
.single-how-works:hover .single-how-works-icon{background: #fff;}
.single-how-works:hover .welcome-hero-btn.how-work-btn{background: #fff;color: #6CE143;}
.single-how-works:hover{box-shadow: 0 0px 10px rgba(71,71,71,.4);background: #6CE143;}