@font-face {
    font-family: 'MuseoSans';
    /* src: url('fonts/Museo_Sans_500.otf') format('opentype'); */
    src: url('fonts/museo_sans_500-webfont.woff2') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'MuseoSans';
    src: url('fonts/Museo_Sans_300.otf') format('opentype');
    font-weight: 300;
    font-display: swap;
}
/*
@font-face {
    font-family: 'MuseoSans';
    src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
*/
@font-face {
    font-family: 'MuseoSans' ;
    src: url('fonts/Museo_Sans_700.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'MuseoSans';
    src: url('fonts/Museo_Sans_900.otf') format('opentype');
    font-weight: 900;
}
:root {
	--bs-body-font-weight: 500;
	--color-light-grey: #54626E;
	--color-grey: #79797A;
	--color-blue: #204A8A;
	--color-green: #8AC646;
	--color-default: #2B343B;
	--font-size: 16px;
}
body,html {
   font-family: 'MuseoSans'; 
   /* font-family: 'Museo Sans', sans-serif; */
   /* font-family: "Raleway", sans-serif; */
	color: #2B343B;
	font-size: 16px;
	background-color: #F3F6F9;
	font-weight: 300;
	line-height: 1.4;
}
.container {
	max-width: 1344px;
}
p, h5, h4, button{
    /* transform: translateY(2px); */
}
p.p-larger{
	font-size: calc( var(--font-size) * 1.1);
	line-height: calc( var(--font-size) * 1.6);
}
h1{
	font-weight: 700;
	font-size: 48px;
}
h3{
	font-weight: 700;
	font-size: 32px;
}
h4{
	font-weight: 700;
	font-size: 24px;
}
h5 {
    font-size: 20px;
    font-weight: 600;
}
.fw-300{
	font-weight: 300;
}

.fw-400{
	font-weight: 400;
}
.fw-500{
	font-weight: 500;
}
.fw-600{
	font-weight: 600;
}
.fw-700{
	font-weight: 700;
}
.fw-900{
	font-weight: 900;
}
hr {
    margin: 24px 0;
    color: #204A8A;
    opacity: .5;
}

.gap100{
	padding-top: 100px;
}

.gap60{
	padding-top: 60px;
}
.gap40{
	padding-top: 40px;
}
.gap20{
	padding-top: 20px;
}
.my-60{
	margin-top: 60px;
	margin-bottom: 60px;
}
.my-40{
	margin-top: 40px;
	margin-bottom: 40px;
}
.txt-smaller{
	font-size: 14px;
}
.txt-blue,
.color-blue,
.text-blue{
	/* color: #204A8A !important; */
	color: var(--color-blue) !important;
}

.text-black {
	color:#1f1f1f;
}
.txt-green{
	color: #8AC646;
}
.color-orange,
.txt-orange
{
	color: #FDB924 !important;
}
.color-purple,
.txt-purple
{
	color: #764F98  !important;
}
.txt-white{
	color: #fff;
}
.txt-grey,
.color-grey{
	/* color: #79797A; */
	color: var(--color-grey);
}
.txt-light-grey,
.color-light-grey{
	/* color: #79797A; */
	color: var(--color-light-grey);
}
.div-title{
	text-align: center;
	margin-bottom: calc(60px - 0rem);
}
.position-relative{
	position: relative;
	z-index: 1;
}
.button{
	padding: 13px 37px 11px 20px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.56px;
	/* letter-spacing: 1px; */
	color: #204A8A;
	position: relative;
	overflow: hidden;
	display: inline-block;
	border: 1px solid #204A8A;
	transition: background-position 0.8s ease;
	border-radius: 40px;
	box-shadow: 0 0px 0 .5px #204A8A;
	background: transparent;
}
.button span{
	/* position: absolute; */
	/* z-index: 1; */
	/* width: 100%; */
    /* height: 100%; */
}
.button:before{
	content: '';
    width: 16px;
    height: 16px;
	background: url(../img/arrow-button-blue.svg);
    /* background: linear-gradient(90deg, #204A8A, #8AC646); */
    top: 50%;
	transform: translateY(-50%);
    right: 13px;
    /* left: 0; */
    position: absolute;
    transition: all .3s ease;
	
	
}

/* .button:before{ */
    /* content: ''; */
    /* position: absolute; */
    /* right: 13px; */
    /* top: 22px; */
    /* background: #204A8A; */
    /* width: 9px; */
    /* height: 2px; */
    /* border-radius: 13px; */
    /* transform: rotate(135deg); */
	
/* } */
/* .button:after{ */
/* content: ''; */
    /* position: absolute; */
    /* right: 13px; */
    /* top: 16px; */
    /* background: #204A8A; */
    /* width: 9px; */
    /* height: 2px; */
    /* border-radius: 13px; */
    /* transform: rotate(227deg); */

	
/* } */
.button:hover{
	 background-position: left bottom;
	     /* box-shadow: 0 6px 20px rgba(30, 74, 111, 0.4); */
}
.button:hover:before{
	right: 7px;
}

a.button{
	text-decoration: none;
	/* color: #fff; */
}
.button-stock-price{
	line-height: 1;
	border-radius: 61px;
	color: #2B343B;	
	font-size: 14px;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	background: linear-gradient(180deg, rgba(138, 198, 70, 0.40) 0%, rgba(215, 255, 169, 0.00) 100%), #ADD77D;
	padding: 14px 20px;
	font-weight: 300;
}
.button-stock-price span{
	font-weight: 700;
	letter-spacing: 0;
	color: 16px;
	color: #204A8A
}
.button-white{
	color: #fff;
	border-color: #fff;
	    box-shadow: 0 0px 0 .5px #fff;
}
.button-white:before{
	/* background: url(../img/arrow-button-white.svg); */
	
	
}
.readmore{
padding: 12px 0 12px 0;
    border-radius: 61px;
    color: #8AC646;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    display: flex;
    text-decoration: none;
    align-items: center;
    column-gap: 10px;
	transition: all .3s ease;
}
.readmoress:before{
	content: '';
    width: 16px;
    height: 16px;
	/* background: url(../img/arrow-button-white.svg); */
    /* background: linear-gradient(90deg, #204A8A, #8AC646); */
    top: 50%;
	transform: translateY(-50%);
    right: 10px;
    /* left: 0; */
    position: absolute;
    transition: all .5s ease;
	
	
}
.readmore:hover{
	color: #204A8A;
}
.readmore:hover .arrow-right{
	border-color: #204A8A;
}
.arrow-right, .long-arrow-right {
    transform: rotate(135deg);
}
.arrow-right, .arrow-left, .long-arrow-right, .long-arrow-left {
    display: block;
    margin: 0px 0 0 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #8ac646;
    border-left: 1px solid #8ac646;
}
.about-link a {
	color:white;
	border:1px solid #fff;
}

.about-link .button:before {
    content: '';
    width: 16px;
    height: 16px;
    background: url(../img/arrow-button-white.svg);
    /* background: linear-gradient(90deg, #204A8A, #8AC646); */
    top: 50%;
    transform: translateY(-50%);
    right: 13px;
    /* left: 0; */
    position: absolute;
    transition: all .3s ease;
}

.overlay-wrapper-content {
    transform: translateY(48px);
}

.story-thumb img {
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
.homepage-wrapper{
		/* background: url(../img/bg-intro.png) no-repeat; */
		/* background-size: 100vw; */
		/* background-position: top left; */
		/* min-height: 200vh; */

}
.section-intro{
	height: 740px;
	background: url(../img/bg-intro.png) no-repeat;
	padding-top: 136px;
	background-position: center bottom;
	background-size:100% 100%;
}

#searchModal .modal-content {
	background:transparent;
	border:0;
	box-shadow:none!important;
}

#searchModal .form-control {
	background:transparent;
	border:0;
	border-bottom:2px solid white;
	border-radius:0;
	color:white;
	font-size:35px;
}

#searchModal .form-control::placeholder {
  color: rgba(255,255,255,0.5);
  opacity: 1;
}

#searchModal .modal-header {
	border-bottom:0;
}


#searchModal button.button {
	color:white;
	border:0;
	box-shadow:none;
}

#searchModal button.button:before {
display:none;
}

#header {
	background-color: black;
	height: 136px;
	position: fixed;
	z-index: 901;
	left: 0;
	transition: top 0.5s ease-in-out;
	width: 100%;
	padding: 0px 60px;
	/* background: linear-gradient(180deg, rgba(232, 237, 243, 0.60) 0%, rgba(232, 237, 243, 0.12) 100%); */
	/* backdrop-filter: blur(5px); */
	/* background: linear-gradient(180deg, rgba(232, 237, 243, 0.90) 0%, rgba(232, 237, 243, 0.54) 100%); */
	/* backdrop-filter: blur(5px); */
	background: none;
}
#header.scrolled,
body:not(.home) #header{
	background: linear-gradient(180deg, rgba(232, 237, 243, 0.90) 0%, rgba(232, 237, 243, 0.54) 100%);
	backdrop-filter: blur(5px);
}
#header a {

}

.nav-down {
  top: 0;
}

.nav-up {
  top: -136px;
}

/* .logo-wrapper{ */
	/* margin-right: 50px; */
/* } */
.navbar-nav a{
	color: #204A8A;
	letter-spacing: 0.32px;
	text-transform: capitalize;	
	line-height: 1;
	font-weight: 300;
}
.navigationbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper-user{
	border-radius: 41px;
	background: rgba(143, 164, 196, 0.10);
	display: flex;
	padding: 4px 4px 4px 8px;
	align-items: center;
	gap: 10px;
	width: 210px;
	height: 56px;
	justify-content: space-between;
}
.ul-icons{
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ul-icons a{
	width: 44px;
	height: 44px;
	display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 100%;
	transition: all .25s ease;
}
.ul-icons a:hover{
    background: #3470a11c;
}
.btn-edit-post-link{
position: fixed;
    /* top: -77px; */
    left: 11px;
    /* transform: translateX(-50%); */
    bottom: 3px;
    transform: scale(0.5);
    transform-origin: left;
}
main#content {
    /* padding-bottom: 16px; */
}
.section-footer{
	height: 740px;
	background: url(../img/btm-btm.png) no-repeat;
	background-position: center bottom;
	background-position: center top;
	position: relative;
	padding-top: 100px;
	color: #fff;
	font-size: 14px;
}
.arc{
	background: url(../img/arc.png) no-repeat;
    background-position: center top;
    height: 50px;
    width: 100%;
	position: absolute;
    top: -1px;
}
.arc-blue{
    background: url(../img/arc-blue.png) no-repeat;
    background-position: center bottom;
    height: 50px;
    width: 100%;
    position: absolute;
    top: -49px;
    z-index: 1;
	background-size: contain;
}
.footerwrapper{
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between
}
.footerbottom{
	padding: 10px 10px;
	background: rgba(255, 255, 255, 0.20);
}
.copyright{
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.56px;
	line-height: 1;
}
.ul-footer{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.ul-footer a{
color: #fff;
    text-decoration: none;
    padding: 9.3px 0;
    line-height: 1.3;
    display: block;
	font-weight: 600;
	letter-spacing: 0.28px;
	
}
.link:hover span{
    color: #8AC646;
	letter-spacing: .5px;
}
.link span{
  text-decoration: none;
  position: relative;
  transition: all .3s ease;

}

.link span::before, .link  span::after{
  content: "";
  position: absolute;
  background-color: rgba(138,198,90,0.72);
  transition: transform .5s;
}
.link span::after{
  left: 0;
  width: 100%;
  height: 1px;
  bottom: -3px;
  transform: scaleX(0);
  transform-origin: left;
}
.link:hover span::after{
    transform: scaleX(1);
}
.col-ul-footer{
	    max-width: 328px;
}
.row.gx40{
    --bs-gutter-x: 40px;
}
.col-ul-footer label{
	text-transform: uppercase;
	font-weight: 600;
	color: #8AC646;
	margin-bottom: 1rem;
	letter-spacing: 0.64px;
}

.ul-legal{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.ul-legal li{
	    display: inline-block;
}
.ul-legal a{
	color: #fff;
	text-decoration: none;
	padding: 0 12px;
	line-height: 1.3;
	font-weight: 300;
	letter-spacing: 0.56px;
	text-transform: capitalize;
}
.card-qr{
	position: relative;
	width: 230px;
	
}
.card-qr-content{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	    padding-top: 195px;
    text-align: center;
}
.qr-code{
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    max-width:90px;
}
.card-qr-content-bottom{
	
}
.list-social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 16px 0 0;
	margin-bottom: 0;
}
.card-qr-content-bottom{
	padding: 0 24px;
}
.negativeadjustment{
	margin-bottom: -36px;
}
/* slider */
.slideritem-wrapper{
	position: relative;
	border-radius: 12px;
	height: auto;
	width: 100%;
	padding: 40px;

	
}
/* .slideritem-wrapper:after{
	content: '';
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(270deg, rgba(67, 96, 34, 0.00) 0%, rgba(138, 198, 70, 0.50) 100%);
backdrop-filter: blur(0px);
border-radius: 12px 0 0 12px;
}

*/
.slideritem-content{
	height: 100%;
	display: flex;
    align-items: center;
	width: 45%;
}
.slideritem-wrapper img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;	
    border-radius: 12px;
	top: 0;
    left: 0;
    z-index: -1;
}
.slideritem-content h2{
	color: #fff;
	font-size: 48px;
	line-height: 1.0;
	margin-bottom: 24px;
	font-weight: 900;
}
.slick-dots li {
    margin: 0;
    padding: 0;
	transition: all .3s ease;
}
.slick-dots li button {
    padding: 0;
    outline: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
	transition: all .3s ease;
}
.slick-dots li button:before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #000;
	opacity: .5;
	    position: relative;
		transition: all .3s ease;
}
.slick-dots li.slick-active,
.slick-dots li.slick-active button
{
	width: 32px;
}
.slick-dots li.slick-active button:before {
    opacity: 1 !important;
    color: unset;
    background: #8AC646;
    width: 32px;
    border-radius: 10px;
}
.slick-dots {
    position: relative;
    bottom: unset;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    padding-top: 10px;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}

/* slider */
/* .section{ */
	/* min-height: 700px; */
/* } */
.bg-body{
	
}
.section-spotlight{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.00) 100%);
	background: linear-gradient(180deg,rgba(206, 215, 230, 1) 0%, rgba(243, 246, 249, 1) 100%);
	padding-bottom: 60px;
}
.col-small {
    width: 172px;
}
.separator{
	width: 40px;
	border-right: 1px solid #204a8880;
	margin-right: 40px;
	height: 100%;
}
.box-spotlight{
	background: url(../img/box-spotlight.svg) no-repeat;
	width: 100%;
	height: 154px;
	background-size: contain;
	padding: 24px 78px 16px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
}
.box {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"><path d="M 12 0 L 340 0..." fill="white"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
}
.box-spotlight2{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 348 154'%3E%3Cpath d='M282 0C288.627 0 294 5.37258 294 12V24C294 40.5685 307.431 54 324 54H336C342.627 54 348 59.3726 348 66V142C348 148.627 342.627 154 336 154H12C5.37259 154 0 148.627 0 142V12C0 5.37259 5.37258 0 12 0H282Z' fill='white'/%3E%3C/svg%3E");
width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 24px 78px 16px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;

}

.row-box-spotlight, .gutterx{
    --bs-gutter-x: 12px;
}
.spotlight-info{
	display: flex;
	align-items: center;
	column-gap: 12px;
}
.text-date{
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	color: #79797A;
}
.tag{
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    background: rgba(253, 185, 36, 0.10);
    font-size: 11px;
    /* letter-spacing: 0.48px; */
    /* text-transform: uppercase; */
    line-height: 1;
    display: inline-flex;
	/* color: #FDB924; */
	color: #fd9a24;
	    font-weight: 500;
		letter-spacing: 0.2px;
		 padding: 4px 8px;
}
.tag.purple{
	color: #764F98;
	background: rgba(118, 79, 152, 0.10);
}
.tag.blue{
	color: #204A8A;
	background: #204a881a;
}
.tag.green{
	color: #01A29C;
	background: rgba(1, 162, 156, 0.10);;
}
.tag.blue.invert{
	background: rgba(243, 246, 249, 0.80);
}
.btn-spotlight{
	position: absolute;
	z-index: 1;
	width: 44px;
	height: 44px;
	top: 0;
	right: 0;
	background: url(../img/arrow-go.svg) no-repeat;
	background-size: contain;
	transition: all .3s ease;
}
.btn-spotlight:hover{
	transform: translate(5px, -5px);
}

.wrapper-about{
	width: calc(100% - 20px);
	padding: 0px 0 0px; 
}
.box-about{
	border-radius: 12px;
	position: relative;
    overflow: hidden;
	color: #fff;
	height: 400px;
}
img.bg-about{
	border-radius: 12px;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: all 10s ease;
}
img.icon-about{
	width: 60px;
	margin-bottom: 24px;
}

.our-cultural-belief h5{
color:  #204A8A;
font-size: 20px;
font-style: normal;
font-weight: 700;
margin-top:20px;
}
.our-cultural-belief .value-card{
text-align:center;
}
.overlay-about{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* background: rgba(32, 74, 138, 0.50); */
	/* backdrop-filter: blur(2px); */
	
	padding: 0;
	transition: all .5s ease-out;
}

.overlay-wrapper{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	
}
.overlay-wrapper-content{
	background: transparent;
	padding: 24px 16px 16px;
	position: relative;
	transform: translateY(55px);
	transition: all .5s ease;
}

.about-link a.readmore:hover{
color: #8AC646;
}
.about-link a.readmore:hover .arrow-right {
    display: block;
    margin: 0px 0 0 0;
    width: 8px;
    height: 8px;
    border-top: 1px solid #8ac646;
    border-left: 1px solid #8ac646;
}
.about-link{
	opacity: 0;
}

.box-about:hover .overlay-about{
	background: none;
	backdrop-filter: none;
}
.box-about:hover .about-link{
	opacity: 1;
}
.box-about:hover .overlay-wrapper-content{
    transform: translateY(0);
}
.box-about:hover .overlay-about{
	/* background: transparent; */
}
.overlay-wrapper-content:before{
	content: '';
	position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(46, 51, 56, 0.00) 0%, rgba(46, 51, 56, 1) 100%);
    /* background: black; */
    mix-blend-mode: multiply;
	z-index: -1;
	opacity: 0;

}
.box-about:hover .overlay-wrapper-content:before{
	opacity: 1;
}
/* .overlay-about.green{ */
	/* background: rgba(1, 162, 156, 0.50); */
/* } */
/* .overlay-about.purple{ */
	/* background: rgba(118, 79, 152, 0.50); */
/* } */
/* .overlay-about.orange{ */
	/* background: rgba(253, 185, 36, 0.50); */
/* } */
.box-about:hover .bg-about{
	/* transform: scale(1.2) */
}


.box-about h4{
	font-weight: 700;
	margin-bottom: 0;
}

.box-story {
    
    height: auto;
    border-radius: 12px;
    padding: 0;
    background: #fff;
}
.box-story_header{
	padding: 16px 18px;
}
 /* Stories */

.story-wrap {
	position: relative;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.story-wrap img{
	border-radius: 0 0 12px 12px;
}
.story-frame,.story-img {
    position: relative;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.story-frame:before{
	content: '';
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgba(0, 0, 0, 0.00) 100%);
    /* filter: blur(2px); */
    z-index: 1;
}
.story-progress {
	position: absolute;
	top: 16px;
	left: 11px;
	right: 11px;
	display: flex;
	gap: .25rem;
	z-index: 5;
}

.story-progress .bar {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, .45);
	border-radius: 5px;
	overflow: hidden;
}

.story-progress .bar>i {
	display: block;
	height: 100%;
	width: 0%;
	background: #fff;
}

.story-top {
	position: absolute;
	z-index: 5;
	top: 32px;
	left: .75rem;
	right: .75rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	pointer-events: none;
}

.story-top .brand {
width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    display: grid;
    place-items: center;
}
.story-top .brand img{
	
}
.story-top .meta {
	color: #fff;
	font-weight: 500;
	/* text-shadow: 0 1px 2px rgba(0, 0, 0, .35); */
}
.storytime{
	color: rgba(255, 255, 255, 0.60);
	font-size: 14px;
	font-weight: 300;
	text-shadow: none;
	padding-left: 10px
}
.story-canvas {
	position: relative;
	width: 100%;
	/* aspect-ratio: 9/16; */
	background: #111;
	height: 425px;
	border-radius: 20px;
}

.story-canvas img,
.story-canvas video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.story-tap {
	position: absolute;
	inset: 0;
	display: flex;
}

.story-tap .zone {
	flex: 1;
}

.story-ctrls {
    position: absolute;
    right: 11px;
    top: 32px;
    z-index: 6;
    display: flex;
    gap: .35rem;
}

.story-ctrls .btn {
	background: rgba(0, 0, 0, .2);
	border: 0;
	color: #fff;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 999px;
}

.story-ctrls .btn:hover {
	background: rgba(0, 0, 0, .48);
}
.box-story.box-event {
    height: auto;
    padding: 0px 0px 1px;
}
.box-story__body{
	padding: 23px 12px;
}
.event-card {
    display: flex;
    gap: 12px;
    border-radius: 12px;
    padding: 8px;
	background: #F3F6F9;
	margin-bottom: 10px;
}
.event-card.past {
    opacity: 0.7;
    background: #F0F0F0;
}
.event-card:not(.past):hover{
	background: linear-gradient(180deg, rgba(243, 249, 236, 0.10) 50%, #F0FFDE 100%), var(--Colour-White, #F3F6F9);
}
.event-title{
	font-weight: 600;
	margin-bottom: 10px;
}
.event-date {
    min-width: 100px;
    height: 100px;
    border-radius: 9px;
    background: #204A8A;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
	
}
.event-date.past {
    background: #54626E;
}
.event-day{
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 2px;
}
.event-mon{
	font-size: 12px;
	letter-spacing: 2px;
	font-weight: 300;
	margin-bottom: 0px;
}
.event-meta{
	color: #79797A;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
		line-height: 1.5;
}
.event-meta i{
	color: #204A8A;
	font-weight: 600;
}
.hover-lift {
    transition: box-shadow .2s ease, transform .2s ease;
}
.hover-lift:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}
.event-desc{
	min-height: 100px;
	display: flex;
	flex-direction: column;
    justify-content: center;
}



 .events-wrapper {
            position: relative;
            background: content-box;
            /* overflow: hidden; */
            /* padding-right: 16px; */
        }

        .arrow-btn {
            position: absolute;
            left: 0;
            right: 0;
            height: 16px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: opacity 0.3s ease;
            border-radius: 10px;
        }

        .arrow-btn.top {
            top: -1px;
            background: linear-gradient(to bottom, #d9f99d 0%, transparent 100%);
            background: rgb(222 237 213);
        }

        .arrow-btn.bottom {
            bottom: -1px;
            background: linear-gradient(to top, #d9f99d 0%, transparent 100%);
            background: rgb(222 237 213);
        }

        .arrow-btn.hidden {
            /* opacity: 0.3; */
            pointer-events: none;
        }

        .arrow-btn svg {
            width: 20px;
            height: 34px;
            color: #204A8A;
        }

        .events-container {
            /* max-height: 418px; */
			max-height: 382px;
            overflow-y: scroll;
            padding: 25px  0px;
        }

        .events-container::-webkit-scrollbar {
            width: 8px;
        }

        .events-container::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .events-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .events-container::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .events-container {
            scrollbar-width: none;
            scrollbar-color: #cbd5e1 #f1f5f9;
        }

        .event-card {
            /* display: flex; */
            /* gap: 16px; */
            /* background: white; */
            /* border: 1px solid #e5e7eb; */
            /* border-radius: 8px; */
            /* padding: 16px; */
            /* margin-bottom: 16px; */
            /* transition: box-shadow 0.2s; */
        }

        .event-card:hover {
            /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
        }

        .event-card:last-child {
            margin-bottom: 0;
        }

        .date-box {
            flex-shrink: 0;
            width: 120px;
            height: 120px;
            background: #1e3a8a;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .date-day {
            font-size: 48px;
            font-weight: bold;
            line-height: 1;
        }

        .date-month {
            font-size: 13px;
            font-weight: 500;
            margin-top: 4px;
            letter-spacing: 0.5px;
        }

        .event-details {
            flex: 1;
            padding-top: 4px;
        }

        .event-title {
            font-size: 16px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 4px;
			    line-height: 1.1;
        }

        .event-subtitle {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .event-location {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            color: #6b7280;
            font-size: 14px;
        }

        .location-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            margin-top: 2px;
        }
		.box-story__body {
    padding: 12px 12px;
}
.card-speaker{
	display: flex;
    gap: 40px;
    border-radius: 80px;
    padding: 8px 40px 8px 8px;
    background: #fff;
    margin-bottom: 12px;
	
}
.speaker-img{
	border-radius: 100%;
	width: 140px;
	min-width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.post-card-image,
.post-card-image img{
    /* height: 332px; */
	height:auto;
}
.img-speaker{
	border-radius: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: solid 5px transparent;
	background-image: linear-gradient(white, white), radial-gradient(circle at top right, #8ac646 , #204a8a );
	background-image: linear-gradient(white, white), radial-gradient(circle at top right,rgba(138, 198, 70, 1) 0%, rgba(103, 189, 92, 1) 25%, rgba(1, 162, 156, 1) 36%, rgba(32, 74, 138, 1) 65%, rgba(32, 74, 138, 1) 100%);
	/* background-image: linear-gradient(90deg, rgba(138, 198, 70, 1) 0%, rgba(32, 74, 138, 1) 56%, rgba(32, 74, 138, 1) 100%); */
	background-origin: border-box;
	background-clip: content-box, border-box;
}
.speaker-title {
    margin-bottom: 10px;
	line-height: 1.25;
	font-weight: 600;
}
.speaker-desc{
	padding: 20px 0 16px;
}
.txt-quote{
	position: relative;
}
.txt-quote:before{
	content: '“';
	    margin-left: -8px;
}
.txt-quote:after{
	content: '”';
	margin-right: -8px;
}
.wrapper-speaker {
    max-width: 857px;
    padding: 0px 0 0px;
	    margin-top: 15px;
}
.box-speaker{
	display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 0;
    background: #fff;
	    height: 100%;
}
.box-speaker__img{
	height: 314px;
}
.speaker__img{
	border-radius: 12px 12px 0 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.box-speaker__content{
	padding: 16px 16px 10px;
	display: flex;
    flex-direction: column;
	 height: 100%;
	 row-gap: 0;
	 justify-content: space-between;
}
.list-action__speaker{
	list-style: none;
	padding: 0;
	display: flex;
	gap: 16px;
	    margin: 0;
    line-height: 1;
	color: var(--color-light-grey);
}
.list-action__speaker li{
	display: inline-flex;
	    align-items: center;
	gap: 8px;
}
.list-action__speaker i{
	font-size: 18px;
}
.list-action__speaker span{
	font-size: 12px;
}
.list-inline.menu-inside{
	text-align:center;
}
.page-menu  {
    padding: 32px 0 32px;
}
.page-menu .list-inline-item:not(:last-child) {
margin-right:-2px;
margin-left:-2px;
}

.page-menu .list-inline-item:last-child {
margin-right:-2px;
margin-left:-2px;
}

.page-menu li:not(:last-child) {
margin-right:-2px;
margin-left:-2px;
}

.page-menu li:last-child {
margin-right:-2px;
margin-left:-2px;
}

.page-menu ul li{
font-weight: 600;
color:#79797A;
padding:10px 20px;
border-bottom:2px solid #B0B0B0;
margin-right:0px;
display: inline-block;
}

.page-menu ul li.active,.page-menu ul li.current-menu-item{
color:#293075;
border-bottom:2px solid #293075;
}
.page-menu ul li {
        color: #79797A;
    font-size: 16px;
	position: relative;
	letter-spacing: 0.32px;
}
.page-menu ul li:hover{
	color: #293075;
	/* border-bottom: 2px solid #293075; */
}

.page-menu ul li a:after {
    display: block;
    content: '';
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    /* border-image: linear-gradient(90deg, rgba(44, 51, 114, 1) 0%, rgba(114, 174, 76, 1) 33%, rgba(41, 48, 116, 1) 83%) 1 0 0 0; */
    border-image: linear-gradient(90deg, #8AC646 0%, #8AC646 33% 33%, #8AC646 83%) 1 0 0 0;	
    border-top: 2px solid;
    /* transform-origin: 0% 50%; */
    position: absolute;
    width: 100%;
    left: 0;
    /* bottom: -2px; */
    top: 100%;
}
.page-menu ul li a:hover:after,
.nav-pills .nav-link.active:after { 
	transform: scaleX(1);
}
.page-menu ul li.active, .page-menu ul li.current-menu-item, .page-menu.kyouth-menu ul li.current-page-ancestor {
    color: #293075;
    border-bottom: 2px solid #293075;
}
.page-menu ul{
	margin-bottom: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #8AC646;
    background-color: transparent;
}
.nav-pills .nav-link {
    border-radius: 0;
	padding: 0;
	color: #79797A;
}
.nav-link:focus, .nav-link:hover {
    color: #293075;
}

.card-post {
	border-radius: 12px;
	padding: 8px;
	background: #fff;
}
.card-post:hover{
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(243, 249, 236, 0.10) 50%, #F0FFDE 100%), var(--Colour-White, #FFF);
}
.card-curated {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-curated:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.post-img{
	margin-bottom: 14px;
}
.post-img img{
	border-radius: 10px;
}
.post-title,
.post-title a {
    font-weight: 600;
    margin-bottom: 20px;
	color: #2B343B;
	text-decoration: none;
	transition: all .25s ease;
}
.post-title a:hover{
	color: #204A8A;
}
.post-body{
	padding: 0 8px 8px;
}

.post-body p {
	color:#79797A
}

.bg-sectiongradient {
	background-image: url('../img/bg-left.jpg'), url('../img/bg-right.jpg');
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
}

.bg-bottom{
	background: url(../img/bg-bottom.jpg) repeat-y;
    background-position: left 0 bottom;
    /* background-size: 42vw; */
	    background-attachment: fixed;
    padding-bottom: 40px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;

}
.bg-bottom:before{
	/* content: ''; */
	/* position: absolute; */
	/* right: 0; */
	/* height: 100%; */
	/* width: 720px; */
	/* bottom: 0; */
	/* background: url(../img/bg-right.jpg) repeat-y; */
	/* background-attachment: fixed; */
}
.bg-left{
	background: url(../img/bg-left.jpg) no-repeat;
    background-position: left 0 bottom 208px;
}
.section-deals{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.00) 100%);
	position: relative;
}
.section-deals:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/grain.svg);
	fill: var(--Colour-bg-Light, #F3F6F9);
	opacity: 0.5;
	mix-blend-mode: color-burn;
	z-index: -1;
}
.breadcrumbtop{
	display: flex;
	gap: 8px;
	align-items: center;
	
}
.breadcrumbtop p{
	transform: translateY(2px);
	font-size: 14px;
    font-weight: 600;
}
.bannerwrapper{
position: relative;
    border-radius: 12px;
    height: 320px;
    width: 100%;
    
}
.bannerwrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.bannerwrapper-content{
    position: absolute;
    left: 40px;
    bottom: 40px;
	/* width: 45%; */
	width: 80%;
}
.bannerwrapper-content h2 {
    color: #fff;
    font-size: 48px;
    line-height: 1.1;
    margin-bottom: 0;
    font-weight: 900;
}
.bannerwrapper h4{
	font-weight: 600;
	font-size: 24px;
}

.section-intro-inside{
	/* background: url(../img/bg-intro.png) no-repeat; */
	padding-top: 136px;
	background-position: center bottom;
}
.section-intro-inside.bg-fixed{
	background-attachment: fixed;
}
.gradient-text-smooth {
    /* background: linear-gradient(90deg, #1e4a6f 0%, #1e4a6f 40%, #8bc34a 48%, #8bc34a 58%, #1e4a6f 66%, #1e4a6f 100%); */
	background: radial-gradient(122.36% 112.17% at 99.74% 1.65%, #8AC646 20%, rgba(1, 162, 156, 0.50) 60%, rgba(1, 162, 156, 0.00) 100%), #204A8A;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
	font-size: 32px;
}
h2.gradient-text-smooth{
	font-size: 48px;
	margin-bottom: 16px;
}
h4.gradient-text-smooth{
	font-size: 20px;
}
.gradient-text-large{
	background: radial-gradient(122.36% 112.17% at 99.74% 1.65%, #8AC646 20%, rgba(1, 162, 156, 0.50) 60%, rgba(1, 162, 156, 0.00) 100%), #204A8A;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
	font-size: 48px;
}
.whoweare-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    background: transparent;
    border: none;
    padding: 0;
	font-weight: 600;
}
.icon.blue {

}
.icon {

}
.cardbox {
    border-radius: 12px;
    border: none;
    padding: 24px;
	background: white;
	height: 100%;
	
	display: flex;
    flex-direction: column;
    justify-content: space-between;

}
.cardbox.type1{
	height: 120px;
}
.cardbox.type2{
	height: 254px;
}
.cardbox.type3{
	height: 215px;
}
.cardbox p{
	font-weight: 300;
	line-height: 1.3;
	color: var(--color-light-grey);
}
.cardbox h3{
	font-size: 32px;
}
.cardbox h2 > span{
	font-size: 24px;
	color: var(--color-blue);
	-webkit-text-fill-color: var(--color-blue);
	display:inline-block;
	line-height:1;
}
span.span25{
	display: inline-block;
    position: absolute;
    right: 0;
    font-weight: 600;
    font-size: 24px;
    width: 102px;
    text-align: left;
    line-height: 20px;
    bottom: 53px;
    color: var(--color-blue);
}

.arrow {
	transition: transform 0.3s ease;
	font-size: 18px;
}

.btn-gradient:hover:before  {
	transform: translate(4px, -50%);
}

.bg-top{
	background: url(../img/bg-top.png) no-repeat;
	background-size: 100%;
	position: relative;
	    /* background-position-y: 28%; */
}
.bg-top:before{
	content: '';
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg,rgba(243, 246, 249, 0) 0%, rgba(243, 246, 249, 1) 100%);
}
.whoweare-right{
	width: 760px;
}
.card-whoweare{
	
}
.row-gutter{
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.section-history {
    height: 740px;
    background: url(../img/btm.png) no-repeat;
    background-position: center bottom;
    position: relative;
    padding-top: 100px;
    color: #fff;
    font-size: 14px;
}

/* timeline */
.timeline-section {

position: relative;
overflow: hidden;
}

.timeline-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: white;
transform: skewY(-1deg);
transform-origin: top left;
}

.timeline-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
background: white;
transform: skewY(-1deg);
transform-origin: bottom right;
}

.section-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 24px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
}

.section-title {
color: white;
font-size: 36px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 80px;
text-align: center;
}

.timeline-container {
position: relative;
margin: 0 auto;
}
.timeline-containerxxx::after {
content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: rgba(255,255,255,0.3);
  box-shadow: 
    40px 0 0 rgba(255,255,255,0.3),
    80px 0 0 rgba(255,255,255,0.3),
    120px 0 0 rgba(255,255,255,0.3),
    160px 0 0 rgba(255,255,255,0.3),
    200px 0 0 rgba(255,255,255,0.3),
	240px 0 0 rgba(255,255,255,0.3),
    280px 0 0 rgba(255,255,255,0.3),
    320px 0 0 rgba(255,255,255,0.3),
    360px 0 0 rgba(255,255,255,0.3),
    400px 0 0 rgba(255,255,255,0.3);
    /* repeat as needed */
	
	
}
.timeline-containerxxx::after,
.timeline-item::after {
content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: -37px;
    background-image: url("data:image/svg+xml,%3Csvg width='40px' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='0' y2='40' stroke='rgba(255,255,255,0.5)' stroke-width='3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 44px 100%;
    left: 5.1px;
	
	 /* content: ''; */
  /* position: absolute; */
  /* width: 100%; */
  /* height: 40px; */
  /* background-size: calc(100% / 20) 100%; */
  /* background-image: linear-gradient(90deg,  */
    /* transparent 0%,  */
    /* transparent 45%,  */
    /* rgba(255,255,255,0.3) 45%,  */
    /* rgba(255,255,255,0.3) 55%,  */
    /* transparent 55% */
  /* ); */
  /* background-repeat: repeat-x; */
}
.timeline-item::before {
content: '';
    position: absolute;
    bottom: -41px;
    left: 48px;
    height: 30px;
    background: #8AC646;
    width: 4px;
	z-index: 1;
}
.timeline-line {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.2);
}

.timeline-ticks {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
display: flex;
justify-content: space-between;
padding: 0 20px;
}

.tick {
width: 2px;
height: 20px;
background: rgba(255, 255, 255, 0.3);
}

.tick.highlight {
background: #8bc34a;
height: 40px;
}

.timeline-items {
display: flex;
justify-content: center;
gap: 25px;
height: 348px;
}

.timeline-item {
flex: 1;
position: relative;
text-align: left;
height: 348px;
width: 375px;
padding: 0 10px;
}

.timeline-circle {
width: 80px;
height: 80px;
background: #8bc34a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #204A8A;
font-size: 20px;
font-weight: 900;
/* box-shadow: 0 4px 15px rgba(139, 195, 74, 0.3);*/
}

.timeline-connector {
    position: absolute;
    width: 1px;
    height: 100%;
    background: #8bc34a;
    left: calc(39.5px + 10px);
    top: 0px;
}

.timeline-content {
padding-left: 90px;
padding-right: 0px;
color: white;
height: 100%;
padding-top: 60px;
}

.timeline-content h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
color: white;
}

.timeline-content p {
font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 300;
	
}
/* timeline */

/* core responsibilty */

.section-responsibility{
	background: #f2f6f9;
}
.responsibility-card {
	padding: 0px 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}
.icon-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 14px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.card-text:last-child {
    margin-bottom: 0;
}
.card-text {
    margin: 0;
	font-weight: 300;
}
.card-title {
    font-size: 20px;
    font-weight: 900;
    color: #204A8A;
    margin-bottom: 14px;
    line-height: 1.4;
}
/* core responsibilty */
/* board of director */
.section-bod{
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.00) 100%);
}
.wrapper-bod:not(.full){
	max-width: 870px;
	margin: 0 auto;
}
.row-bod{
	justify-content: center;
	--bs-gutter-x: 60px;
    --bs-gutter-y: 60px;
}
 .directors-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}

.director-card {
	text-align: center;
	max-width: 250px;
	margin: 0 auto;
	transition: transform 0.3s ease;
	
}
.director-card .readmore{
	justify-content: center;
	transform: translateX(13px);
}
.director-card-flex{
	display: flex;
	flex-direction: column;
	/* min-height: 420px; */
	justify-content: space-between;
}
.director-card:hover {
	/* transform: translateY(-10px); */
}

.director-image {
	width: 232px;
	height: 232px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 25px;
	background: #e0e0e0;
	/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}
.director-card.large{
	max-width: 290px;
}
.large .director-image{
	width: 232px;
	height: 232px;
}

.director-name {
	font-size: 18px;
	font-weight: 700;
	color: #204A8A;
	margin-bottom: 11px;
	line-height: 1.3;
	/* letter-spacing: .5px; */
}

.director-position {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 0;
	    line-height: 1.3;
}
/* board of director */
/* section report */
.section-report{
	
}
.reports-container {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Large Report Card - Left */
.large-report {
    background: white;
    border-radius: 12px;
    padding: 8px;
	width: 635px;
	/* transition: box-shadow .2s ease, transform .2s ease; */
	transition: background-color .8s ease;
}
.large-report:hover,
.small-report:hover
{
background: linear-gradient(180deg, rgba(243, 249, 236, 0.10) 50%, #F0FFDE 100%), var(--Colour-White, #FFF);
}
.wrapper-report{
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
	width: 255px;
}
.wrapper-report-img{
	padding: 40px 40px 5px;
}
.report-badge {
	display: inline-block;
	color: #2c5f96;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.large-report-content {

}

.report-text h3 {
	font-size: 14px;
	letter-spacing: 1px;
	margin-bottom: 10px;
	font-weight: 300;
}

.report-text h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
	margin: 0;
}

.report-cover {
    width: 100%;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.3s ease;
}

.report-cover:hover {
	transform: perspective(1000px) rotateY(0deg);
}

.report-cover img {
	width: 100%;
	height: 310px;
	display: block;
	    object-fit: contain;
}

/* Small Report Cards - Right */
.small-reports {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	transition: all .8s ease;
}
.small-report {
    background: white;
    border-radius: 10px;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    transition: all 0.3s ease;
    flex: 1;
}

.small-report:hover {
	/* transform: translateY(-5px); */
	/* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); */
}

.small-report-text h4 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}

.small-report-text h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
	margin-bottom: 5px;
}

.small-report-cover {
    width: 193px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;

}
.small-report-text{
    padding: 0 16px;
}
.small-report-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Report Cover Placeholder Styles */
.cover-dark-green {
    /* background: linear-gradient(135deg, #1a4d2e 0%, #0d3d1f 100%); */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.cover-icon {
	font-size: 60px;
	margin-top: 20px;
}
/* section report */
.section-explore {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.00) 100%);
    position: relative;
}

.box-explore{
	position: relative;
	/* background: url(../img/box-spotlight.svg) no-repeat; */
	background-size: contain;
	min-height: 200px;
	height: 100%;
	border-radius: 12px;
	transition: all .35s ease;

}
.box-explore:hover{

    box-shadow: 0 10px 23px -11px rgba(0, 0, 0, .08);
}
.box-explore.smaller{
	min-height: 154px;
}
.box-explore.larger {
    min-height: 220px;
}
.box-explore.larger:before {
    background-image: url(../img/box-spotlight-larger.svg);
	    background-position: right top;

}
.user-avatar.larger img {
    width: 100px;
}
.box-explore.smaller .box-explore-content{
	padding-bottom: 16px;
}
.box-explore.larger .box-explore-content{
	padding: 24px 24px
}
.box-explore:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: url(../img/box-spotlight.svg) no-repeat;
	background-size:100%;
	    background-position: right top
}
.box-explore:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 70px);
	/* background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%); */
	background: #fff;
	border-radius: 0 0 12px 12px;
	transition: background-color .5s ease;
}
.box-explore:hover:after{
	background: linear-gradient(180deg, rgba(243, 249, 236, 0.10) 50%, #F0FFDE 100%), var(--Colour-White, #FFF);
}
.box-explore.smaller:hover:after{
	background: linear-gradient(180deg, rgba(243, 249, 236, 0.10) 10%, #F0FFDE 100%), var(--Colour-White, #FFF);
}
.box-explore:hover .btn-spotlight{
	transform: translate(5px, -5px);
}
.box-explore-content{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 0px);
	padding: 24px 78px 1px 24px;
	z-index: 1;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wrapper-slider-speaker{
	max-width: 780px;
	margin: 0 auto;
}
.item-speaker {
	display: flex;
    gap: 40px;
    margin-bottom: 0;
}
.slider-speaker .speaker-img {
    width: 200px;
    min-width: 200px;
    height: 200px;
}
.slider-speaker .speaker-title {
    font-size: 28px;
	margin-bottom: 20px;
}
.slider-speaker .txt-quote:before {
    content: '“';
    margin-left: -11px;
}
.slider-speaker .img-speaker {
    border: solid 7px transparent;
}
.slider-speaker .slick-dots li button:before {
    opacity: .3;
}

.navigation-wrapper {
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
	padding-top: 28px;
}
.slider-speaker .slick-dots{
    width: auto;
    display: inline-flex;
    padding: 0;
	position: relative;
	margin-bottom: 3px;
}
		 /* Arrows positioning - flexible with dots */
        .slider-speaker  .slick-prev,
        .slider-speaker  .slick-next {
            position: static !important;
            width: 40px;
            height: 40px;
            transform: none !important;
			border-radius: 50%;
			transition: all .2s ease;
        }
		.slider-speaker  .slick-prev:hover,
        .slider-speaker  .slick-next:hover{
			background: rgba(143, 164, 196, 0.10);
		}

        .slider-speaker .slick-prev:before,
        .slider-speaker  .slick-next:before {

			display: none;
        }

 

        .slider-speaker .slick-disabled:before {
            opacity: 0.3 !important;
        }
	
.section-belief {
    min-height: 740px;
    background: url(../img/btm.png) no-repeat;
    background-position: center bottom;
    position: relative;
    padding-top: 100px;
    color: #fff;
}
.wrapper-belief{
	max-width: 1224px;
	margin: 0 auto;
	font-weight: 300;
}

.box-belief{
	border-radius: 300px;
	border: 1px solid rgba(255, 255, 255, 0.50);
	min-height: 300px;
	padding: 40px 100px;
}
.belief-left{
	width: 240px;
}
.belief-icon{
	display: flex;
	width: 80px;
	height: 80px;
	padding: 16px;
	align-items: center;
	gap: 10px;
	background: #8AC646;
	border-radius: 50%;
	margin-bottom: 24px;
}
.wrapper-belief h3{
	font-size: 32px;
	line-height: 1;
}
.belief-center{
	padding: 0 60px;
}
.row-belief-point{
	--bs-gutter-x: 60px;
}
.ul-points {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
.ul-points li, 
.section-belief p{
	color: rgba(255, 255, 255, 0.9);
}
.ul-points li {
	display: flex;
	align-items: flex-start;
	margin-bottom:16px;
	font-weight: 300;
}

.ul-points li:last-child {
	margin-bottom: 0;
}
.ul-points li::before {
	content: '';
	min-width: 28px;
	width: 28px;
	height: 28px;
	background: #01A29C;
	border-radius: 8px;
	margin-right: 20px;
	margin-top: -1px;
	position: relative;
}

.ul-points li::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 5px;
	width: 7px;
	height: 14px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ul-points li {
	position: relative;
}
.belief-points h5{
	font-size: 20px;
	margin-bottom: 24px;
}
.tab-belief{
	margin: 0 auto;
	    align-items: center;
    justify-content: center;
	column-gap: 19px;
	margin-bottom: 8px;
}
.tab-belief .nav-item{
	padding-bottom: 78px;
	position: relative;
}
.tab-belief .nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='40px' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0' x2='0' y2='40' stroke='rgba(169,169,169,1)' stroke-width='3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
	background-size: 45px 100%;
    left: 78px;
}
.tab-button{
	overflow: hidden;
    
    height: 60px;
}
.tab-belief .nav-item:before{
	content: '';
    position: absolute;
    width: 4px;
    height: 24px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    background: #A9A9A9;
	transition: all .4s ease;
}
.tab-belief .nav-item.active:before {

    height: 76px;
    left: 50%;
    bottom: 0px;
    background: #8AC646;
}
.tab-button-wrapper{
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	transition: all .25s ease;
}
.tab-button.active .tab-button-wrapper{
	transform: translateY(-60px);
}
.tab-icon{
	height: 48px;
	width: 48px;
	border-radius: 48px;
	border: 1px solid #fff;
	opacity: .7;
	display : flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease;
	/* margin-bottom: 12px; */
	margin: 6px 0;
	transform: scale(1);
}
.tab-icon:hover{
	opacity: 1;
}
.tab-icon img{
	width: 32px;
	height: auto;
	object-fit: contain;
}
.tab-title{
	height: 60px;
	border: none;
	min-width: 48px;
	border-radius: 48px;
	display : flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease;
	background: #8AC646;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 10px 16px;
	max-width: 160px;
	min-width: 160px;
	text-align: center;
	letter-spacing: 0.64px;
	color: #fff;
	transform: scale(0.5);
}
.tab-button.active .tab-title{
	transform: scale(1);
}
.tab-button.active .tab-icon{
	transform: scale(0.5);
	opacity: 0;
}

/* page loader */

        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			background: url(../img/bg-intro.png) no-repeat;
			background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loader-logo {
            font-size: 72px;
            font-weight: bold;
            color: white;
            margin-bottom: 40px;
            opacity: 0;
        }

        .loader-bar-container {
            width: 300px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .loader-bar {
            height: 100%;
            background: #a8ff78;
            background: #01A29C;
			/* background: linear-gradient(80deg, rgba(32, 74, 138, 1) 0%, rgba(17, 119, 146, 1) 35%, rgba(138, 198, 70, 1) 70%, rgb(174 249 88) 100%); */
			/* background:#8AC646; */
            width: 0%;
            border-radius: 10px;
            box-shadow: 0 0 20px #a8ff78;
        }

        .loader-text {
            color: white;
            margin-top: 20px;
            font-size: 14px;
            opacity: 0.7;
        }

        .main-content {
            opacity: 0;
        }
/* page loader */


.img-blueprint{
	transform: rotate(-2.71deg);
}
.img-blueprint2{

}
.wrapper-shared-values{
	max-width: 920px;
	margin: 0 auto;
}
.row-shared-values{
	/* --bs-gutter-x: 20px; */
	/* --bs-gutter-y: 20px; */
}
.box-shared-values{
	text-align: center;
	/* padding: 20px 20px; */
	/* border-right: 1px solid #204A8A; */
	/* border-bottom: 1px solid #204A8A; */
	position: relative;
	padding-top: 30px;
	padding-bottom: 40px;
	font-size: 16px;
}
.box-shared-values:before{
	content: '';
	border-right: 1px solid #204A8A;
	height: calc(100% - 40px);
	bottom: 20px;
	right: 0;
	width: 1px;
	position: absolute;
}
.box-shared-values:after{
content: '';
    border-bottom: 1px solid #204A8A;
    width: calc(100% - 40px);
    bottom: 0px;
    right: 20px;
    height: 1px;
    position: absolute;
}
.box-shared-values-content p{
	max-width: 320px;
	margin: auto;
}
.row-shared-values [class^="col-"]:nth-child(even) .box-shared-values:before{
	border-right: 0px solid #204A8A;
}
.row-shared-values [class^="col-"]:nth-child(3) .box-shared-values:after,
.row-shared-values [class^="col-"]:nth-child(4) .box-shared-values:after{
	border-bottom: 0px solid #204A8A;
}
.wrapper-boxes-about{
	max-width: 1040px;
	margin: 0 auto;
	height: 443px;
}

/* EVENTS */
/* Events Calendar Container */
.events-calendar {
    margin: 0 auto;
    min-height: 100vh;
}
.events-calendar hr{
	/* border: 1px solid rgba(0, 0, 0, 0.1); */
	border: 1px solid #79797A;
	margin: 0;
}
/* Calendar Header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.events-year{
	margin-bottom: 32px;
}
.year-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-blue);
    margin: 0;
}

.event-filters {
    top: 11px;
    display: flex;
    gap: 15px;
    position: absolute;
    right: -13px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s;
}

.filter-btn.active {
    color: #1e40af;
}

.filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Month Group */
.month-group {
    /* margin-bottom: 40px; */
	    padding: 32px 0;
		/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
}

.month-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-light-grey);
    margin-bottom: 20px;
}

/* Events Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* Event Card */
.event-card-inside {
    display: flex;
    gap: 12px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.event-card-inside:hover {
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); */
}

.event-card-inside.past {
    opacity: 0.7;
	background: #F0F0F0;
}

/* Event Date Box */
.event-date-box {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 25px;
    font-weight: 700;
    color: white;
}

.event-date-box.active {
    background: var(--color-blue);
}

.event-date-box.past {
    background: #54626E;
}

.date-single {
    display: block;
}

.date-range {
    display: block;
    font-size: 25px;
}

/* Event Info */
.event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
	padding-right: 4px;
}

.event-title {
    /* margin: 0; */
    /* font-size: 16px; */
    /* font-weight: 600; */
    /* line-height: 1.4; */
}

.event-title a {
    color: #1e293b;
    color: var(--color-default);
    text-decoration: none;
    transition: color 0.2s;
}
.event-date-box.past .event-title a{
	color: #54626E;
}

.event-title a:hover {
    color: #1e40af;
}

.event-time,
.event-location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.event-time svg,
.event-location svg {
    flex-shrink: 0;
	color: var(--color-blue);
	transform: translateY(1px);
}

/* Pagination */
.events-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 50px; */
    padding-top: 30px;
    /* border-top: 1px solid rgba(0, 0, 0, 0.1); */
}

.pagination-nav {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s;
}

.pagination-nav.prev {
    color: var(--color-green);
}

.pagination-nav.next {
    color: var(--color-green);
}

.pagination-nav.disabled {
    color: #BEBEBE;
    cursor: not-allowed;
}

.pagination-nav:not(.disabled):hover {
    opacity: 0.7;
}

.pagination-numbers {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-number {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-default);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.page-number:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.page-number.current {
    /* background: #1e40af; */
        color: var(--color-green);
		font-weight: 600;
}

.pagination-ellipsis {
    color: #cbd5e1;
    padding: 0 4px;
}

.wp-theme-KLCC .fancy-ico {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 0%;
}

.wp-theme-KLCC .fancy-ico span {
    display: block;
    position: relative;
    left: 9px;
    top: 9px;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform .25s ease-in-out;
	opacity: .7;
}
.wp-theme-KLCC #fancybox-close {
    top: 8px;
    right: 8px;
    cursor: pointer;
    z-index: 111105;
    display: none;
    position: fixed;
}

.wp-theme-KLCC #fancybox-close span::after,
.wp-theme-KLCC #fancybox-close span::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 4px;
    width: 23px;
    height: 2px;
    background-color: #fff;

}
.wp-theme-KLCC #fancybox-next, body.rtl #fancybox-prev {
    left: auto;
    right: -41px;
}
.wp-theme-KLCC #fancybox-prev, body.rtl #fancybox-next {
    left: -41px;
    right: auto;
}
.wp-theme-KLCC #fancybox-prev span::after,
.wp-theme-KLCC #fancybox-next span::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 20px;
    height: 20px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.wp-theme-KLCC #fancybox-close span::before {
    transform: rotate(45deg);
}

.wp-theme-KLCC #fancybox-close span::after {
    transform: rotate(-45deg);
}
.wp-theme-KLCC #fancybox-close:hover span,
.wp-theme-KLCC #fancybox-next:hover span,
body.rtl #fancybox-prev:hover span {
    transform: none;
	opacity: 1;
}

.wp-theme-KLCC #fancybox-prev:hover span,
body.wp-theme-KLCC .rtl #fancybox-next:hover span {
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .event-filters {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .filter-btn {
        justify-content: flex-start;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .events-pagination {
        flex-direction: column;
        gap: 20px;
    }

    .pagination-nav {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
        background: white;
        border-radius: 8px;
    }
}

/* No Events */
.no-events {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 16px;
}
/* EVENTS */




.gallery{
    margin: 30px auto 30px  !Important;
    display: flex;
    flex-wrap: wrap;
        column-gap: 0;
    row-gap: 0px;
	justify-content: center;
	align-items: center;
}

.gallery img {
border-radius:0!important;
}
.gallery br{
	display: none !important;
}
.gallery-item {
	float: none !Important;
	margin: 0 !Important;
	max-width: 33%;
	flex: 0 0 auto;
	width: 20%;
	display: inline-flex;
	padding: 0px;
	position: relative;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-2 .gallery-item img{
    height:268px;
}

.gallery-caption {
    margin-left: 0;
    position: absolute;
    color: #fff;
    font-size: 12px;
    /* background: #00000036; */
    display: block;
    width: 100%;
    border: 1px solid;
    bottom: 0;
    margin: 0;
    height: 100%;
    padding: 15px;
	opacity: 0;
	display: none;
}
.gallery-icon {
    width: 100%;
}
.gallery-item img {
    width: 100%;
    object-fit: cover;
    border: 1px solid #fff !Important;
    padding: 0px;
    height: 186px;
}
.gallery-item a:hover img{
	opacity: .7;
}
.gallery-item:hover .gallery-caption {
	opacity: 1;
}

.card-contact{
	width: 580px;
	min-height: 680px;
	margin: 0 auto;
	border-radius: 12px;
	background: var(--Colour-White, #FFF);
	backdrop-filter: blur(10px);
	padding: 0;
}
.card-contact-inner{
	display: flex;
	height: 100%;
	flex-direction: column;
	align-self: stretch;
}
.card-contact-top{
	padding: 40px 40px 22px;
	border-bottom: 1px solid #79797A;
	text-align: center;
}
.card-contact-bottom{
	padding: 22px 40px 40px;
}
.contactemail,.contactemail a{
	color: #01A29C;
}
.contactemail a{
	text-decoration: none;
}
.contactemail i{
	font-size: 24px;
}


.modal-qr .modal-content{
	border-radius: 12px;
background: linear-gradient(180deg, #F7FDEF 0%, #D4DDE9 100%);
}
.btn-close-float{
    -webkit-appearance: none;
    border: none;
    background: none;
    font-size: 24px;
    color: #fff;
    position: fixed;
    top: 24px;
    right: 24px;

}
.social-card{
	background: #fff;
	border-radius: 12px;
	
}
.social-card .card-body{
	padding: 24px 24px;
}
.social-card a{
	text-decoration: none;
	color: var(--color-default);
	 font-weight: 600;
	     line-height: 1;
}
.social-card .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
    line-height: 1.3;
}
.wrapper-ab{
	display: flex;
	column-gap: 12px;
}
.cardleaderspeak .post-thumbnail {
    position: relative;
    padding-top: 132%;
    overflow: hidden;
    background-color: #e9ecef;
}
.cardleaderspeak  .post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
b, strong {
    font-weight: 700;
}

.cardqr-inside{
    max-width:110px;
}