@charset "utf-8";
/* CSS Document */


/* common css
================================================== */
body, html {
overflow-x: hidden;}

body{
  margin: 0;
  overflow-x: hidden!important;
	font-family:Helvetica, "sans-serif";}

section {
 	padding: 200px 150px;
	width: 100%;}

@media only screen and (max-width: 768px) {
	section {
 	padding: 100px 25px;}}


/*  Color Code
================================================== */
.ioi-orange{color: #F15A22!important}
.ioi-blue{color: #1F3C92!important}  
.ioi-lightblue{color: #D8EFF0!important}
.ioi-lightorange{color: #F7E9D4!important}
.ioi-grey{color: #4D4D4F!important}
.ioi-green{color: #006543!important}
.ioi-lgreen{color: #eaf6ef!important}


@font-face {
  	font-family:Helvetica, "sans-serif";
	src: url('../font/Helvetica-01.ttf') format('truetype');}
@font-face {
  	font-family:Helvetica, "sans-serif";
	src: url('../font/Helvetica-Bold-02.ttf') format('truetype');
	font-weight: bold;
 	font-style: normal;}



/* text
================================================== */
.title{font-family:Helvetica, "sans-serif"!important;
	font-size: 3rem!important;}

p{font-family:Helvetica, "sans-serif"!important;}

.text-bold{font-weight: 700!important;}

@media only screen and (max-width: 1199.9px) {
	.ar-text{color: #000; font-size: 12px; letter-spacing: 0.1rem;}
	.ar-text img{ height: 35px!important; width: auto;}}

.text-justify{
	text-align: justify;}

h1, h2, h3, h4, h5, h6{
	font-weight: 700!important;
	font-family:Helvetica, "sans-serif"!important;}


/* NAVBAR
================================================== */
.navbar-dark{
	background-color: #fff!important;
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.21);}

.fixed-top {
    transition: .5s;}

.top-bar {
    height: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);}

.navbar .navbar-nav .nav-link {
	font-family:Helvetica, "sans-serif";
	font-size: 16px;
	line-height: 1rem;
    margin-right: 10px;
    padding: 18px 0;
    color: #474747!important;
    font-weight: 500;
    outline: none;}

@media (max-width: 1279.9px) {
	.navbar .navbar-nav .nav-link {
		margin-right: 6px;
		font-size: 14px;}}	
	
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
	 color:#006543!important;
	transition: 0.3s;
	font-weight: 700;}

.navbar .navbar-nav .nav-link:after{
	position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 0%;
	  content: '.';
	  color: transparent;	 
	  height: 2px;}

.navbar .navbar-nav .nav-link:hover:after{width: 100%;}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
		margin-left: 25px;
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);}
	
    .navbarW.navbar-nav .nav-link {
        padding: 10px 0; }}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 79, 163, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
	color: #004FA3!important;}

.navbar-dark .navbar-toggler {
  color: #006543!important;
	border-color: #006543!important;}

/* HEADER - Video Cover
================================================== */
header {
  position: relative;
  background-color: #fff;
  min-height: 25rem;
  width: 100%;
  height: 100vh;
  overflow: hidden;}

header video {
  position: absolute;
  top: 2%!important;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;}


@media (max-width: 991.98px) {
 header {
  position: relative;
  background-color: #fff;
  min-height: 25rem;
  width: 100%;
  height: 100%;
  overflow: hidden;}}

@media (max-width: 1199.98px) {
	header video {
		top: 3%!important;
	}}

@media (max-width: 991.98px) {
header video {
  position: absolute;
  top: 6%!important;
  right: 30;
  z-index: 1;
  width: 100%;
  height: 100%;}}

@media (max-width: 767.98px) {
	header video {
		top: 5%!important;
	}}

@media only screen and (max-width: 575.9px){
	header video {
 position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100vw!important;
 height: auto;}}

@media only screen and (max-width: 575.9px){
header {
  position: relative;
  background-color: #fff;
  width: 100vw!important;
  height: 100%!important;
  min-height: 650px;
  overflow: hidden;}}


/* Button
================================================== */
a {text-decoration: none!important;}

.button {
	 display: inline-block;
	 padding: 0.6rem 1.1rem;
	 border-radius: 5px;
	 color: #fff;
	 text-transform: uppercase;
	 font-size: .8rem;
	font-weight: 700;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;}

 .button:after {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #447087;
	 border-radius: 5px;
	 z-index: -2;}

 .button:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #d2232a;
	 transition: all 0.3s;
	 border-radius: 5px;
	 z-index: -1;}

 .button:hover {
	 color: #fff;}

 .button:hover:before {
	 width: 100%;}

.btn {
	-webkit-transition: none;
	transition: none;}

.btn:hover {
	text-decoration: none;}

.btn:focus, .btn.focus {
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(255,195,29,0.25)}

.btn-outline-primary {
	
	color: #fff!important;
	background-color: #006543!important; 
	border: none!important;}

.btn-outline-primary:hover {
	color: #fff!important;
	background-color: #1F3C92!important;}

.btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: 0 0 0 .2rem rgba(255,195,29,0.5)}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: #1F3C92;
	background-color: transparent}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem rgba(255,195,29,0.5)}





/* GROUP MANAGING DIRECTOR AND CHIEF ECECUTIVE
================================================== */
#gmd{
	padding: 100px 25px 25px;}

@media only screen and (max-width: 991.9px) {
	#gmd{
	padding: 70px 5px 50px!important;}}

.gmd-title{
	height: 100px!important; 
	width: auto!important;}

@media only screen and (max-width: 575.9px) {
	.gmd-title{
	height: 80px!important; 
	width: auto!important;}}

.gmd{background-color: #eaf6ef!important;
padding: 30px 50px 0px;}
@media only screen and (max-width: 991.9px) {
	.gmd{
padding: 30px 10px 0px;}}
	
	
.gmd-name{font-size: 14px;font-weight: 700; line-height: 14px;}
.gmd-name2{font-weight: 400!important; }

.gmd-text{ font-weight: bold!important;color: #006543!important}

.title-1{color: #006543!important; font-size: 20px; font-weight: 700; }


.img-btm{display: flex;align-items: flex-end!important;}

@media only screen and (max-width: 575.9px) {
.img-btm{margin-top: 15px!important;}}

.gmd-text-2{
background-color: #006543!important;
padding: 30px 50px;}

@media only screen and (max-width: 991.9px) {
.gmd-text-2{padding: 15px 15px!important;}}

/* Chief Sustainability Officer
================================================== */
#cso{padding: 100px 25px 0px}

@media only screen and (max-width: 575.9px) {	
#cso{padding: 100px 0px 0px;}
	
.cso{padding: 30px 10px 0px!important;}	}

@media only screen and (max-width: 575.9px) {
	.cso-text{padding: 15px 15px!important;}}

.cso{background-color: #eaf6ef!important;
padding: 30px 50px 0px;}
.cso-text{background-color: #006543!important;
padding: 30px 50px!important;}
.line-height-t{line-height: 28px!important;}
.line-height-c{line-height: 36px!important;}


/* RATIONALE
================================================== */
#rationale{
	min-height: 500px;
	padding: 100px 0px 100px;
background-image:url("../image/BG-2.jpg");background-repeat: no-repeat; background-position: center center; background-size: cover;}

@media only screen and (max-width: 991.9px) {
	#rationale{
		padding: 100px 0px 100px;}
}


/* FIVE YEAR STRATEGY
================================================== */

.fiveyear{  
	padding: 50px 0px 20px 100px!important;}

@media only screen and (max-width: 767.9px) {
	.fiveyear{  
	padding: 50px 0px 20px 20px!important;}}


.bg-green-box-1{
	font-size: 18px;
	font-weight: 700;
	text-align: justify;
	padding: 150px 100px 100px 20px!important;}

@media only screen and (max-width: 991.9px) {
.bg-green-box-1{
	font-size: 16px;
	text-align: left;
	padding: 30px 30px!important;}	}

.accordion-header h5{
	margin-bottom: 0px!important;}

@media only screen and (max-width: 991.9px) {
.accordion-header h5{
	font-size: 1rem!important;}}

/* Accordion */
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;}

.accordion-button:focus {
    z-index: 3;
    border-color: none!important;
    outline: 0px;
    box-shadow: rgba(249, 157, 40, 0.25) 0px 0px 0px 0.25rem;}

.P1:not(.collapsed) {
	font-size: 18px;
	font-weight: 700!important;
    color: #fff!important;
    background-color: #013920!important;;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);}
.P2:not(.collapsed) {
	font-size: 18px;
	font-weight: 700!important;
    color: #fff!important;
    background-color: #013920!important;;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);}
.P3:not(.collapsed) {
	font-size: 18px;
	font-weight: 700!important;
    color: #fff!important;
    background-color: #013920!important;;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);}
.P4:not(.collapsed) {
	font-size: 18px;
	font-weight: 700!important;
    color: #fff!important;
    background-color: #013920!important;;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);}
.P5:not(.collapsed) {
	font-size: 18px;
	font-weight: 700!important;
    color: #fff!important;
    background-color: #013920!important;;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);}

.accordion-body-1{
	background-color: #eaf6ef!important;
	padding: 1.5rem 1.5rem;}
.accordion-body-2{
	background-color: #eaf6ef!important;
	padding: 1.5rem 1.5rem;}
.accordion-body-3{
	background-color: #eaf6ef!important;
	padding: 1.5rem 1.5rem;}
.accordion-body-4{
	background-color: #eaf6ef!important; 
	padding: 1.5rem 1.5rem;}
.accordion-body-5{
	background-color: #eaf6ef!important; 
	padding: 1.5rem 1.5rem;}

/* Arrow Button */
.accordion-button::after {
    content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")!important;
 }


/* JUST TRANSITION
================================================== */
.just-transition{  
	padding: 50px 0px 50px 100px!important;}

@media only screen and (max-width: 767.9px) {
	.just-transition{  
	padding: 50px 0px 20px 20px!important;}}


.bg-green-2{
	background-color: #013920!important;
}

.bg-green-box-2{
	font-size: 18px;
	font-weight: 700;
	text-align: justify;
	padding: 150px 100px 100px 100px!important;
	background-color: #013920!important;}

@media only screen and (max-width: 767.9px) {
.bg-green-box-2{
	font-size: 16px;
	text-align: left;
	padding: 30px 30px!important;}	}

	
	

/* DIVIDERS
================================================== */
#div-1,#div-2,#div-3{margin: 100px 0px!important;}
@media only screen and (max-width: 991.9px) {
#div-1,#div-2,#div-3{margin: 50px 0px 50px!important;}	}

.div-1{
	position: relative;
  /* The image used */
  background-image: url("../image/divider-image.gif");
  /* Set a specific height */
  min-height: 500px;
  /* Create the parallax scrolling effect 
  background-attachment: fixed; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}

@media only screen and (max-width: 991.9px) {
	.div-1{	min-height: 350px!important;}}

@media only screen and (max-width: 575.9px) {
	.div-1{	min-height: 300px!important;}}

.div-1_text{
	padding: 50px 50px!important;}

@media only screen and (max-width: 991.9px) {
	.div-1_text{
	padding: 50px 50px!important;}}

@media only screen and (max-width: 767.9px) {
	.div-1_text{
	padding: 50px 30px!important;}}

@media only screen and (max-width: 575.9px) {
	.div-1_text{
	padding: 50px 15px!important;
	}}

.div-1_image{
	position: absolute!important;
	width: auto!important;
	height: 220px!important;
	left: 10%;
	bottom:5%!important;}

@media only screen and (max-width: 1199.9px) {
.div-1_image{
	width: auto!important;
	height: 180px!important;
	bottom:5%!important;}}

@media only screen and (max-width: 991.9px) {
.div-1_image{
	width: auto!important;
	height: 180px!important;
	bottom:5%!important;}}


@media only screen and (max-width: 767.9px) {
.div-1_image{
	left: 3%;
	width: auto!important;
	height: 180px!important;
	bottom:5%!important;}}

@media only screen and (max-width: 575.9px) {
.div-1_image{
	width: auto!important;
	height: 120px!important;
	bottom:5%!important;}}


.div-2{
	position: relative;
  /* The image used */
  background-image: url("../image/divider-image-2.gif");
  /* Set a specific height */
  min-height: 500px;
  /* Create the parallax scrolling effect 
  background-attachment: fixed; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}

@media only screen and (max-width: 575.9px) {
	.div-2{	min-height: 300px!important;}}

.div-2_image{
	position: absolute!important;
	width: auto!important;
	height: 180px!important;
	right: 5%;
	top: 9%!important;}

@media only screen and (max-width: 1199.9px) {
.div-2_image{
	width: auto!important;
	height: 130px!important;
	right: 5%;
	top: 5%!important;}}

@media only screen and (max-width: 991.9px) {
.div-2_image{
	width: auto!important;
	height: 150px!important;
	right: 5%;
	top: 5%!important;}}

@media only screen and (max-width: 767.9px) {
.div-2_image{
	width: auto!important;
	height: 120px!important;
	right: 5%;
	top: 5%!important;}}

@media only screen and (max-width: 575.9px) {
.div-2_image{
	width: auto!important;
	height: 120px!important;
	right: 5%;
	top: 5%!important;}}



.div-3{
	position: relative;
  /* The image used */
  background-image: url("../image/divider-image-3.gif");
  /* Set a specific height */
  min-height: 500px;
  /* Create the parallax scrolling effect */
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;}


@media only screen and (max-width: 575.9px) {
	.div-3{	min-height: 300px!important;}}

.div-3_image{
	position: absolute!important;
	width: auto!important;
	height: 220px!important;
	right: 10%;
	bottom:5%!important;}

@media only screen and (max-width: 1199.9px) {
.div-3_image{
	bottom:5%!important;
	width: auto!important;
	height: 180px!important;}}


@media only screen and (max-width: 991.9px) {
.div-3_image{
	right: 10%;
	bottom:5%!important;
	width: auto!important;
	height: 180px!important;}}

@media only screen and (max-width: 768.9px) {
.div-3_image{
	bottom:5%!important;
	width: auto!important;
	height: 150px!important;}}

@media only screen and (max-width: 575.9px) {
.div-3_image{
	right: 3%!important;
	bottom:5%!important;
	width: auto!important;
	height: 120px!important;}}

/*  DOWNLOAD OUR REPORT
================================================== */
.archive{
	text-decoration: underline!important;}

#download{margin: 150px 200px;}

@media only screen and (max-width: 575.9px) {
	#download{margin: 50px 15px;}}
@media only screen and (max-width: 991.9px) {
	#download{margin: 75px 15px;}}
@media only screen and (max-width: 1199.9px) {
	#download{margin: 100px 15px;}}

.download-text{font-style: italic!important;font-size: 12px; color: #7F7F7F;}

.download-our-report{
	text-align: left;
	font-size: 20px;
	font-family:Helvetica, "sans-serif";
	font-weight: 700!important;
	min-width: 500px;
	padding: 10px 20px;
	color: #006543!important;
	 border: solid 2px #006543!important;
	background-color: #eaf6ef!important;
	 display: inline-block;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;}

@media only screen and (max-width: 767.9px) {
	.download-our-report{
	min-width: 100%!important;
	font-size: 16px;
	padding: 7px 10px;
	margin: 0px 10px;}}

.download-our-report:after {
	  border-bottom: solid 1px #006543!important;
	 background-color: #eaf6ef!important;
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: -2;}

.download-our-report:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #1D3586;
	 transition: all 0.3s;
	 z-index: -1;}

.download-our-report:hover {
	 border: solid 2px #1D3586!important;
	 color: #fff!important;}

.download-our-report:hover:before {
	 width: 100%;}

/* Between 700px and 1000px */
@media only screen and (min-width: 1580.9px)  {
	.download-our-report-2, .download-our-report{
	min-width: 650px!important;
	}}


.download-btn {
	 padding: 0.75rem 1.25rem;
	 border: solid 2px #006543!important;
	 border-radius: .5rem;
	 color: #006543;
	 text-transform: uppercase;
	 font-size: .8rem;
	 font-weight: bold;}

.download-btn:after {
	 border-color: #006543!important;
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: #fff;
	 border-radius: .5rem;
	 z-index: -2;}

.download-btn:before {
	 content: '';
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 0%;
	 height: 100%;
	 background-color: #1D3586;
	 border: none;
	 transition: all 0.3s;
	 z-index: -1;}

.download-btn:hover {
	 border: solid 2px #1D3586!important;
	 color: #fff;}

.download-btn:hover:before {
	 width: 100%;}

@media only screen and (max-width: 575.9px) {
	.download-btn {
	border: none;
	 display: inline-block;
	 padding: 0.5rem 1rem;
	 border-radius: .5rem;
	 text-transform: uppercase;
	 font-size: .7rem;
	 font-weight: bold;
	 letter-spacing: 0.15rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;}}

#download-book{
	padding: 100px 100px;
	min-height: 500px;
	background-image: url("../image/Download-bg.png");background-repeat: no-repeat; background-position: center left; background-size:cover;}

@media only screen and (max-width: 991.9px) {
	#download-book{
		padding: 25px 30px;
		background-image: url("../image/Download-bg.png");background-repeat: no-repeat; background-position: center right; background-size:cover;}}


.download-left-padding{padding: 100px 150px!important;}
@media only screen and (max-width: 575.9px) {
	.download-left-padding{padding: 70px 20px 10px!important;}}

@media only screen and (max-width: 575.9px) {
#downloads h3, h5{
	padding: 0px 10px;}}



/*===============================================*/
/*  FOOTER	 						    	 */
/*===============================================*/

#footer a{
	font-size: 20px;
    color: #006543!important;}    

#footer a:hover{
    color: #1F3C92!important;}

.hr-footer{margin:0px!important;
margin-top: 1px solid #474747!important;}

.list-inline{font-size: 18px;}
i.fab {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;}

.footer-text{font-size:11px; color: #4F4F4F; letter-spacing: 1px;}