@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root{
	--green: #4fb63b;
}



/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-family: 'Open Sans' ,Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #6b6b6b;
    font-weight: 600;
	line-height: 28px;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#444;	text-decoration:none;}

a:hover {text-decoration:none;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
/* wrapper */

.header{
	padding: 23px 0 28px 0;
}

.container{
	max-width: 1378px;
}

a.custom-btn {
    display: inline-block;
    padding: 19px 18px;
    background: var(--green);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 30px;
    text-transform: uppercase;
}

/* header */


/* footer */
.footer {
	background: url(../image/Social-BG.jpg) no-repeat center;
	background-size: cover;
	padding: 184px 0 140px;
}

.social {
	gap: 50px;
	padding-top: 40px;
}

.social span{
	font-size: 22px;
  font-weight: 800;
  color: #FFF;
  display: block;
  padding-top: 26px;
}

.social a {
    width: 90px;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/

.green{
	color: var(--green);
}

.bebas{
	font-family: 'Bebas Neue', cursive;
}


.hero-section{
	background: url(../image/cover-image.jpg) no-repeat center;
	background-size: cover;
	padding: 250px 0;
}

.hero-bottom {
	padding-top: 109px;
}

.hero-bottom h2{
	font-size: 119.5px;
	line-height: 70px;
	padding-bottom: 38px;
}

.hero-bottom h3{
	font-size: 48.5px;
	line-height: 70px;
	padding-bottom: 93px;
}

.key-section {
	background: #ececec;
	padding: 98px 0 90px;
}

.title{
	font-size: 70px;
	line-height: 70px;

}

.key-section h2{
	padding-bottom: 78px;
}

.key-section h3{
	font-size: 28px;
	line-height: 28px;
	font-weight: 800;
	padding-bottom: 47px;
}

.key-section ul li{
	font-size: 22px;
	font-weight: 600;
	line-height: 35px;
	padding-bottom: 30px;
	padding-left: 45px;
	background: url(../image/A-icon.png) no-repeat left top 6px;
}

.key-section img {
    height: 379px;
}

.key-section ul li:last-child{
	padding-bottom: 0;
}


.key-section p{
	font-size: 22px;
	font-weight: 600;
	line-height: 35px;
	margin:0;
}


.green-section{
	padding: 132px 0 138px;
	background: url(../image/Green-global-BG.png) no-repeat center;
	background-size: cover;
	position: relative;
}

.green-section h3{
	font-size: 49.5px;
	line-height: 53px;
}

.green-section span{
	margin-top: 39px;
	margin-bottom: 43px;
	height: 4px;
	width: 133px;
}

.abt-section{
	padding: 40px 0 83px;
}

.abt-section p{
	font-size: 22px;
	font-weight: 600;
	line-height: 36px;
}

.service-section .container {
    max-width: 1600px;
}

.service-section{
	padding-bottom: 50px;
}

.ser-box{
	background-color: #ececec;
	border-radius: 10px;
	flex:1;
	padding: 25px;
	text-align: center;
}

.ser-row > *{
	display: flex;
}

.ser-box h3{
	font-size: 22px;
	line-height: 26px;
	padding-bottom: 24px;
	font-weight: 800;
	padding-top: 35px;
}

.contact-section{
	background: #ececec;
	padding-top: 104px;
	padding-bottom: 107px;
}

.contact-section h3{
	font-weight: 800;
	font-size: 22px;
	line-height: 26px;
	padding-top: 17px;
	padding-bottom: 78px;
}

.contact-section form input:not([type=checkbox]){
	width: 100%;
	height: 60px;
	border-radius: 10px;
	border: 0;
	background: #FFF;
	margin-bottom: 40px;
}


.contact-section form textarea{
	width: 100%;
	height: 136px;
	border-radius: 10px;
	border: 0;
	background: #FFF;
	margin-bottom: 24px;
}

.contact-section form label{
	font-size: 16px;
	font-weight: 600;
	color: #646464;
	margin-bottom: 8px;
	
}

.custom-checkbox label{
	padding-left: 62px;
}


.custom-checkbox input {
	position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 40px;
    width: 40px;
    z-index: 1;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 40px;
	width: 40px;
	background-color: #fff;
	border-radius: 10px;
}


.custom-checkbox input:checked ~ .checkmark {
	background-color: var(--green);
}

.checkmark:after {
	content: "";
    position: absolute;
    display: none;
    left: 15px;
    top: 6px;
    width: 11px;
    height: 20px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
	display: block;
}

.custom-checkbox {
    position: relative;
}

.contact-section form button {
    background: var(--green);
    border: 0;
    width: 100%;
    height: 65px;
    border-radius: 40px;
    color: #fff;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: 600;
    max-width: 250px;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (min-width:768px) {
	.ser-row > * {
    padding: 0 10px;
}
	
}

@media only screen and (max-width:1024px) {
	
	.hero-section ,  .hero-bottom , .key-section , green-section , .abt-section , .contact-section , .green-section , .footer{
		padding: 60px 0;
	}

	.service-section {
		padding-bottom: 30px;
	}

	.title {
		font-size: 45px;
		line-height: 45px;
	}

	.hero-bottom h2{
		font-size: 80px;
		line-height: 80px;
		padding-bottom: 15px;
	}
	
	.hero-bottom h3{
		font-size: 30px;
		line-height: 36px;
		padding-bottom: 45px;
	}

	.key-section ul li, .key-section p, .abt-section p{
		font-size: 18px;
		line-height: 24px;
		font-weight: 500;
	}

	.contact-section form button{
		font-size: 22px;
		line-height: 26px;
	}

	.social img {
		max-width: 45px;
	}
	
	
.key-section img {
    height: auto;
}

	
}


@media only screen and (max-width:767px) {

	.green-section h3{
		font-size: 34px;
		line-height: 34px;
	}
	
	.custom-checkbox {
		padding-bottom: 25px;
	}

	a.custom-btn{
		font-size: 13px;
		padding: 11px 18px;
	}

	.key-section h2 {
		padding-bottom: 25px;
	}

	.key-section h3 {
		font-size: 20px;
		line-height: 26px;
		font-weight: 600;
		padding-bottom: 20px;
	}

	.social{
		gap:30px;
	}
	
}