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

html{
	overflow-x: hidden!important;
 	 scroll-behavior: smooth;
	font-family: "Open Sans", sans-serif;
	margin: 0;}

/* GENERAL
================================================== */

section {
	height: 100%;
	width: 100%;}

.v-center{
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);}

@media (max-width:991.98px){
	.v-center{ top: 0%;
  left: 0%;
  transform: translate(0%, 0%);}}

a:hover {
    color: #004FA3;}

/* text
================================================== */
@font-face {
	font-family: "Open Sans", sans-serif;}



/*  Color Code
================================================== */
.kwap-brown{color: #a6864b!important}  
.kwap-blue{color: #0a345d!important} 
.kwap-blue2{color: #066e9f!important}
.kwap-blue3{color: #68aee0!important}
.kwap-grey{color: #77787B!important}
.kwap-lightbrown{color:#D6D0CA!important;}
.bg-blue{background-color: #0a345d!important;}

h1, h2, h3, h4, h5 {
	font-weight: bold!important;}

.no-margin{margin: 0!important;}

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



/* text
================================================== */

.title{font-family: "Open Sans", sans-serif!important; 
	font-size: 3rem!important;}

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

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

.ar-text img{ width: 300px!important; width: auto;}

@media only screen and (max-width: 1199.9px) {
	.ar-text img{ width: 250px!important; width: auto;}}

@media only screen and (max-width:  767.9px) {
	.ar-text img{ width: 170px!important; width: auto;}}


.text-justify-left{text-align: justify!important;}

@media only screen and (max-width:  1199.9px) {
	.text-justify-left{text-align: left!important;}}	
	
h1, h2, h3, h4, h5, h6{
	font-weight: 700!important;
	font-family:  "Open Sans", sans-serif!important; }

.kwap-title{
	margin-bottom: 50px;
	color:  #0a345d!important;
	padding-left: 0px!important;}

.kwap-title-2{
	margin-bottom: 50px;
	color:  #ffffff!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: "Open Sans", sans-serif; 
	font-size: 16px;
	line-height: 1rem;
    margin-right: 10px;
    padding: 18px 0;
    color: #a6864b!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:#0a345d!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: #004FA3!important;
	border-color: #004FA3!important;}

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

header video {
  position: absolute;
  top: 0;
  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: 991.98px) {
header video {
  position: absolute;
  top: 0;
  right: 30;
  z-index: 1;
  width: 100%;
  height: 100%;}}



@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;}}



/* RATIONALE
================================================== */
#rationale{
background-image: url("../image/BG_About.jpg");
	background-repeat: no-repeat; 
	background-position: top left; 
	background-size:cover;
	padding: 100px 100px!important;
	min-height: 700px;}


@media only screen and (max-width: 575.9px){
	#rationale{
		background-position: top center; 
		padding: 35px 20px 100px!important;}}


/* VISION
================================================== */
#vison{padding: 150px 200px;
	background-color: #e7e7e7!important;}

@media only screen and (max-width: 1199.9px){
	#vison{padding: 150px 150px;}}

@media only screen and (max-width: 991.9px){
	#vison{padding: 35px 20px;}}

@media only screen and (max-width: 575.9px){
	#vison{padding: 35px 20px;}}


.vision-text{
	padding: 0px 0px 0px;
	text-align: justify;}
  

/* 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 {
	padding: .375rem .375rem!important;
	line-height: 1.1!important;
	color: #fff!important;
	background-color: #a6864b!important; 
	border: none!important;}

.btn-outline-primary:hover {
	color: #fff!important;
	background-color: #0a345d!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)}




/* CHAIRMAN'S STATEMENT 
================================================== */
#chairman{
padding: 100px 0px 30px 0px!important;}

@media only screen and (max-width: 991.9px) {
	#chairman{
		padding: 50px 0px 30px 0px!important;}}

@media only screen and (max-width: 767.9px) {
	#chairman{
		padding: 30px 0px 25px 0px!important;}}

@media only screen and (max-width: 575.9px) {
	#chairman{
		padding: 30px 0px 25px 0px!important;}}

.chairman-bg{
	background-image:url("../image/Chairman_BG.jpg");
	background-repeat: no-repeat; 
	background-position: center right; 
	background-size :cover;
	padding: 50px 150px 0px 150px!important;}

.text-box{
	margin: 50px 0px 0px 0px;
	background-color: #0a345d;
	padding: 80px 25px;	}

.text-box p{
	text-align: justify;
	font-size: 18px;
	font-weight: 800!important;
	color: #fff!important;
	line-height: auto;}

@media only screen and (max-width: 1399.9px) {
	.chairman-bg{
	padding: 50px 15px 0px 15px!important;}}

@media only screen and (max-width: 991.9px) {
	.chairman-bg{
	padding: 50px 20px 0px 20px!important;}
.text-box{
	margin: 20px 10px 0px 10px!important;
	padding: 25px 10px!important;}
.text-box p{
	text-align: left!important;
	font-size: 16px!important;}}


@media only screen and (max-width: 575.9px) {
	.chairman-bg{
	padding: 50px 10px 00px 10px!important;}
.text-box{
	margin: 20px 10px 0px 10px!important;
	padding: 25px 15px!important;}
.text-box p{
	font-size: 16px!important;}}


.title-key{
	margin-left: 350px!important;}

@media only screen and (max-width: 991.9px) {
.title-key{
	margin-left: 100px!important;}}	
	
@media only screen and (max-width: 575.9px) {
.title-key{
	margin-left: 50px!important;}}



/*  CEO 
================================================== */
#ceo{
padding: 100px 0px 30px 0px!important;}

@media only screen and (max-width: 991.9px) {
	#ceo{
		padding: 50px 0px 30px 0px!important;}}

@media only screen and (max-width: 767.9px) {
	#ceo{
		padding: 30px 0px 25px 0px!important;}}

@media only screen and (max-width: 575.9px) {
	#ceo{
		padding: 30px 0px 25px 0px!important;}}

.pceo-bg{
	background-image:url("../image/bg-pceo.jpg");
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size:cover;
	padding: 50px 100px 0px 100px!important;}

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

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

@media only screen and (max-width: 575.9px) {
	.pceo-bg{
	padding: 50px 10px 0px 10px!important;}}


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


/* HIGHLIGHTS OF THE YEAR
================================================== */
#highlights{
	padding: 100px 100px!important;
	min-height: 500px;}
@media only screen and (max-width: 1199.9px) {
	#highlights{padding: 100px 25px 50px!important;}}	
@media only screen and (max-width: 991.9px) {
	#highlights{padding: 75px 15px 50px!important;}}
@media only screen and (max-width: 575.9px) {
	#highlights{padding: 50px 5px 50px!important;}}

/* SUSTAINABILITY STATEMENT
================================================== */
#sustainability{padding: 100px 0px 100px 0px;}

@media only screen and (max-width: 575.9px) {
#sustainability{padding: 100px 10px 50px 10px;}}

.btm-0{margin-bottom: 0px!important;}

@media only screen and (max-width: 991.9px) {
.text-box-2{
	margin: 20px 10px 0px 10px!important;
	padding: 25px 15px!important;}}

@media only screen and (max-width: 575.9px) {
.text-box{
	margin: 20px 10px 0px 10px!important;
	padding: 25px 15px!important;}}

/*  DOWNLOAD OUR REPORT  #e94f28 #273479
================================================== */
.archive{
	text-decoration: underline!important;
	color: #fff!important}
.archive:hover{
	color: #a6864b!important;}

#downloads{
	background-image: url("../image/download-bg-01.jpg");
	background-repeat: no-repeat; 
	background-position: top center; 
	background-size:cover;
	padding: 150px 150px;}

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

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

.download-our-report{
	text-align: center;
	font-size: 20px;
	font-family:  "Open Sans", sans-serif; 
	font-weight: 700!important;
	width: 300px;
	height: 300px;
	border-radius: 10px;
	padding: 10px 20px;
	color: #a6864b	;
	border: solid 3px #a6864b!important;
	background-color: #fff!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{
	font-size: 16px;
	padding: 7px 10px;
	margin: 0px 10px;}}

.download-our-report:after {
	 background-color: #fff!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: #273479;
	 transition: all 0.3s;
	 z-index: -1;}

.download-our-report:hover {
	 border: solid 2px #273479!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{
	min-width: 650px!important;	}}

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

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

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

.download-btn:hover {
	 border: solid 2px #a6864b!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;
	 text-transform: uppercase;
	 font-size: .7rem;
	 font-weight: bold;
	 letter-spacing: 0.15rem;
	 transition: all 0.3s;
	 position: relative;
	 overflow: hidden;
	 z-index: 1;}}

.on-top{
	position: absolute;
	z-index: 2;
	top: 50%; /* adjust the top position of the button */
  	left: 50%; /* adjust the left position of the button */
 	transform: translate(-50%, -50%); }

/*===============================================*/
/*  FOOTER	 	   #0a345d #a6864b					    	 */
/*===============================================*/

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

#footer a:hover{
    color: #0a345d!important;}

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


.list-inline{font-size: 18px;}
li i {
  display: inline-block;
  border-radius: 9px;
  box-shadow: 0 0 2px #888;
  padding: 0.2em 0.3em;} 

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