@import url('bootstrap.min.css');
@import url("animate.css");
@import url("./fontawesome/fontawesome.min.css");

@font-face {
    font-family: 'Akro-black';
    src: url('../fonts/Akrobat-Black.otf');
}

@font-face {
    font-family: 'Akro-bold';
    src: url('../fonts/Akrobat-Bold.otf');
}

@font-face {
    font-family: 'Akro-ExtraBold';
    src: url('../fonts/Akrobat-ExtraBold.otf');
}

@font-face {
    font-family: 'Akro-ExtraLight';
    src: url('../fonts/Akrobat-ExtraLight.otf');
}

@font-face {
    font-family: 'Akro-Light';
    src: url('../fonts/Akrobat-Light.otf');
}

@font-face {
    font-family: 'Akro-SemiBold';
    src: url('../fonts/Akrobat-SemiBold.otf');
}

@font-face {
    font-family: 'Akro-Thin';
    src: url('../fonts/Akrobat-Thin.otf');
}

@font-face {
    font-family: 'Akro-Regular';
    src: url('../fonts/Akrobat-Regular.otf');
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    color: #1F363D;
    font-family: "Akro-Regular";
}

html, body {
    overflow-x: hidden;
    overflow-y: visible;
}

.no-scroll {
    overflow-y: hidden;
    touch-action: none;
    -ms-touch-action: none;
}

.ourteam-container{
    width: 87.5rem;
    margin: auto;
    max-width: 100%;
}
.hide {
    display: none;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-500 {
    z-index: 500;
}

.cursor-pointer {
    cursor: pointer;
}

.font-akro-bold {
    font-family: "Akro-bold";
}

.font-akro-light {
    font-family: "Akro-Thin";
}

.font-akro-light {
    font-family: "Akro-Light";
}



.mt-6 {
    margin-top: 4rem;
}

.w-30 {
    width: 35%;
}

.mt-7 {
    margin-top: 5rem;
}

.mt-8 {
    margin-top: 6rem;

}

.fs-4-5 {
    font-size: 1.6rem;
}

.fs-5-5 {
    font-size: 1.125rem;
}

.white-space-pre-line {
    white-space: pre-line;
}

.white-space {
    /* white-space: ; */
}


a {
    text-decoration: none;
}

a:hover {
    color: inherit;
}

.font-white {
    color: white;
}

.font-black {
    color: #000000;
}

.sub-h1 {
    font-size: 3.125rem;
}

.custom-container {
    max-width: 100%;
    width: 120rem;
    margin: auto;
}

.top-menu {
    height: calc(12.875rem / 2);
    position: fixed;
    top: 0;
    background-color: white;
    width: 100%;
    z-index: 99999;
    left: 0;
    transition:200ms ease-in;
    opacity: 1;
}

.top-menu.sub{
    background-color: transparent;
}
.top-menu.hidden{
    opacity: 0;
    pointer-events: none;

}
.top-menu.fadedbg{
    background-color: #ffffffcf;
    box-shadow: 0.0625rem 0.0625rem 0.3125rem #363636;
}
.top-menu .logo img {
    width: 6rem;
    margin-left: 3.4375rem;
}

.top-menu .logo {
    transition: 500ms;
}

.list-style-none {
    list-style: none;
}


.top-menu .menu li {
    width: 11.2rem;
    text-align: center;
}


.top-menu .menu li a {
    color: #1F363D;
    font-size: 1.425rem;
    font-family: "Akro-Regular";
    padding: 0rem 0rem;
}


.top-menu .menu li a:hover {
    font-family: 'Akro-bold';
}

.-left-2 {
    left: -1.25rem;
}


.top-menu .menu li:nth-child(2) {
    width: 13.5rem;
}

.top-menu .menu li:nth-child(3) {
    width: 12rem;
}

.top-menu .menu li:nth-child(4) {
    width: 7rem;
}

.home-banner {
    min-height: 49.8125rem;
    position: relative;
    /* background-image: url('../images/home/hero-image.jpg');
    background-size: cover;
    background-position: center; */
}


 
.home-banner .text-banner {
    z-index: 1;
    position: absolute;
    width: 48.5rem;
    color: #fff;
    text-shadow: -0.125rem 0.2875rem 1.25rem rgb(0 0 0), -0.125rem 0.2875rem 1.25rem rgb(0 0 0);
    margin-bottom: 5rem;
} 

.home-banner .text-banner h1 {
    font-family: 'Akro-ExtraBold';
    font-size: 4rem;
}

.home-banner .text-banner p {
    font-family: 'Akro-regular';
    font-size: 2rem;
    text-shadow:-0.125rem 0.2875rem 1.25rem rgb(0 0 0), -0.125rem 0.2875rem 1.25rem rgb(0 0 0), -0.125rem 0.2875rem 1.25rem rgb(0 0 0), -0.125rem 0.2875rem 1.25rem rgb(0 0 0);
}

.home-banner .text-banner span {
    padding: 0.625rem 0.9375rem;
    padding-top: 0;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.home-banner .text-banner span::after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgb(77, 140, 87);
    animation-name: highlight-text;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 1500ms;
    z-index: -1;
}

.home-content-text {
    line-height: 2.15rem;
    max-width: 43.75rem;
    font-size: 1.4rem;
    margin-right: calc((100vw / 2 - 43.75rem) / 1.5);
}
.section-two-index {
    min-height: 32.1875rem;
}

.ceo-content p  {
    font-size: 1.4rem;
    line-height: 1.9rem;
}

#home_carousel {
    width: 100%;
}

#home_carousel .carousel-item img {
    min-height: 49.8125rem;
    object-fit: cover;
    object-position: center;
}

#home_carousel .carousel-control-next,
#home_carousel .carousel-control-prev {
    transform: scale(2.7);
    width: 10%;
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}

.link-button,
.link-button-slim {
    background-color: #005744;
    color: white;
    font-size: 1.4rem;
}

.link-button {
    padding: 1.1rem;
}

.link-button-slim {
    padding: 1.1rem;
}


.link-button:hover, 
.link-button-slim:hover {
    background-color:  #003f31;
    color: white;
}

.arrow-image-home {
    clip-path: polygon(0% 2%, 75% 2%, 97% 50%, 75% 97%, 0% 97%);
    margin-top: -0.75rem;
    object-fit: cover;
    width: 100%;
    height: 33.1875rem;
}
.seperator::after {
    content: "|";
    padding: 0rem 3.125rem;
}

.green-box {
    background-color: #d7f3dc;
    background-size: 100%;
    background-repeat: no-repeat;
    min-height: 33.125rem;
    clip-path: polygon(0% -8%, 100% -8%, 100% 90%, 98% 105%, 2% 103%, 0% 90%);
}
.filter-shadow{
    filter: drop-shadow(0.9375rem 0.625rem 0.5625rem #a0a0a0);
}
.filter-shadow-reverse{
    filter: drop-shadow(-0.9375rem 0.625rem 0.5625rem #a0a0a0);
}
.green-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/home/home-bed-runner-patterns.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.fs-bold {
    font-family: 'Akro-bold';
}

.about-image1{
    /* clip-path: polygon(2% 2%, 71% 2%, 97% 50%, 70% 97%, 0% 97%); */
    clip-path: polygon(0% 2%, 75% 2%, 97% 50%, 75% 97%, 0% 97%);
    object-fit: cover;
    height: 36.9375rem;
}
.about-image2{
    height: 36.9375rem;
    object-fit: cover;
}

.clippy-about{
    position: relative;
    right: -1.2rem;
    /* clip-path: polygon(30% 0%, 100% 0%, 100% 98%, 29% 98%, 0% 50%, 29% -2%); */
    clip-path: polygon(30% 0%, 100% 0%, 100% 98%, 25% 98%, 0% 50%, 25% -2%);
    display: block;
    width: 100%;
}

.green-box p {
    color: #2F5066;
}

.green-box img {
    width: 26.875rem;
    clip-path: circle(43.5% at 50% 50%);
}
.ceo-image-home {
    filter: drop-shadow(0.0625rem 0.0625rem 0.4375rem #a3a3a3);
}

.box-cut {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    right: 0;
    overflow-x: clip;
    pointer-events: none;
}

.box-cut .top-left {
    position: absolute;
    top: -3.4375rem;
    z-index: 10;
    border-left: 3.3125rem solid #d7f3dc;
    border-top: 3.8125rem transparent;
    border-bottom: 1.875rem solid transparent;
    border-right: 1.875rem solid transparent;
    transform: rotate(270deg);
    left: -1.9375rem;
}

.box-cut .top-right {
    position: absolute;
    top: -3.1875rem;
    z-index: 10;
    border-left: 1.875rem solid transparent;
    border-top: 0rem transparent;
    border-bottom: 1.875rem solid transparent;
    border-right: 3.3125rem solid #d7f3dc;
    transform: rotate(90deg);
    right: -1.75rem;
}

.title-wrap img {   
    position: absolute;
    z-index: -1;
    transform: scale(0.5);
    max-width: 9.5rem;
    top: -3.25rem;
    left: -3.375rem;
    animation: inner-pentagon 4.5s linear 1s 1 normal forwards;
}

.hsbc-logo {
    margin-top: 1.3125rem;
    width: 12.6875rem;
}

.temasek-logo {
    width: 13.625rem;
}

.asian-development-bank-logo {
    width: 19.0625rem;
}

.clifford-capital-holdings-logo {
    width: 21.125rem;
    margin-top: -0.9375rem;
}

.expand-info .plus {
    display: block;
}

.expand-info.bg-light-green .plus {
    display: none;
}

.expand-info .minus {
    display: none;
}

.expand-info.bg-light-green .minus {
    display: block;
}



.bg-light-green {
    background-color: #D8F3DC;
    margin: auto;
}

.bg-dim-green {
    background-color: #D9E4DF;
}

.info-team {
    display: none;
}

.info-team h3 {
    font-family: 'Akro-bold';
}

.info-team h3,
.info-team h5,
.ourteam-container .name {
    color: #2F5066;
}

.info-team p {
    line-height: 1.4rem;
}

.expand-info {
    width: 4.625rem;
    height: 2.1875rem;
    font-size: 2.8125rem;
    line-height: 2.1875rem;
    border-radius: 0.625rem 0.625rem 0rem 0rem;
    transition-timing-function: ease-in;
    transition-duration: .200ms;
}
.ease-in{
    transition-timing-function: ease-in;
}
.info-image.loading{
    background-color: transparent;
    box-shadow: none;
}
.info-image {
    max-width: 21.875rem;
    margin: auto;
    filter: drop-shadow(0.0625rem 0.0625rem 0.4375rem #696969);
    transition-timing-function: ease-in-out;
    transition-duration: 200ms;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.info-image:hover {
    cursor: pointer;
}

footer {
    font-family: 'Akro-Light';
    color: #1F363D;
}

.link-active {
    font-family: "Akro-bold" !important;
    color: inherit;
}

div.section {
    margin: 0 auto;
    padding: 3.125rem 0 0 0;
    max-width: 100%;
    position: relative;
    z-index: 500;
}

.header-container {
    overflow: hidden;
}

.header {
    position: relative;
    z-index: 1;
    overflow: visible; 
    filter: drop-shadow(0.125rem 0.25rem 0.5625rem #ccc);
    padding-top: calc(12.875rem / 2);
}

.header #big_penta {
    content: "";
    position: absolute;
    z-index: -5;
    width: 140%;
    top: -129.8rem;
    left: -20%;
    height: 850%;
    background-repeat: no-repeat;
    background-position: bottom;
    box-shadow: 0.0625rem 0.75rem 0.25rem #ccc;
    background: linear-gradient(45deg, #D8F3DC, white 56% 43%, #D8F3DC);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    animation: header-bg-rotate 60s linear infinite forwards;
}

.title-container {
    position: relative;
    height: 10.8rem;
}

.page-title {
    min-width: 15.625rem;
    text-align: center;
    font-size: 3.2rem;
    font-family: 'Akro-bold';
    color: #2F4F66;
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    font-family: 'Akro-bold';
    color: #2F4F66;
}

.contact-us-title {
    text-align: center;
    font-size: 2.4rem;
    font-family: 'Akro-bold';
    color: #2F4F66;
}

.scale-toggle {
    height: 100% !important;
}

.scale-toggle > div{
    height: 100% !important;
}

.scale-toggle > div > div{
    height: 100% !important;
}

.scale-toggle > div > div > div {
    height: 100% !important;
}

.scale-toggle > div > div > div > div {
    height: 100% !important;
    margin-top: 10%;
    margin-bottom: 10%;
}

.about {
    z-index: 600;
    height: calc(100vh);
    position: relative;
    /* background-position-y: -38px; */
    background-repeat: no-repeat;
}
.translatey-50{
    transform: translateY(-50%);
}
.text-2{
    clip-path: inset(100% 0% 0% 0%);
}
.text-1{
    /* clip-path: inset(0% 0% 100% 0%); */
}
.left-0{
    left: 0;
}

.about div.text {
    font-family: 'Akro-bold';
}

.parallax-container {
    position: relative;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: -5;
}

.parallax-bg {
    background: url("../images/about-us/about-pentagreen-capital.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.no-parallax-bg {
    background: '#fff';
}


.bg-about {
    z-index: 2;
    /* content: "";
    z-index: 1;
    background-image: url("../images/about-us/about-pentagreen-capital.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-position-y: 0.375rem;
    background-repeat: no-repeat; */
}
.about:after{
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.2;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.about::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.about {
    perspective: 31.25rem;
    transition: ease;

}

.about.fixed {
    position: fixed;
    top:-3.125rem;
    left: 0;
    width: 100%;
    height: calc(100vh+3.125rem);
    opacity: 1;
    transform:translateY(0);
    transition: 0.3s ease-in;
}
.about.fixed.moveUp{
    transform:translateY(-100vh);
}

.about.hide{
    opacity: 0;
    pointer-events: none;
}

.dummy-div {
    height: calc(100vh + 110vh);
    padding-bottom: 6.25rem;
    display: none;
}

.flip-card.animate {
    transform: rotateY(180deg);
    transition: transform 0.5s;
}

.flip-card-front,
.flip-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {}

.flip-card-back {
    transform: rotatey(180deg);
}

/* .about .content {
    max-width: 100%;
    height: 350px;
    padding: 0 20%;
    overflow: scroll;
} */


.vision-goals .content {
    display: flex;
    flex-direction: row;
    margin: 0;
}


.vision-goals .img-container {
    flex: 1 1 52%;
    position: relative;
    overflow: hidden;
    height: 46.5625rem;
    margin: 0;
}

.vision-goals .img-container>img {
    width: 100%;
    height: 100%;
}

.vision-goals .img-container:first-child>img,
.vision-goals img:first-child {
    position: absolute;
    left: -1.2rem;
}

.vision-goals .img-container:last-child>img,
.vision-goals img:last-child {
    position: absolute;
    right: -1.2rem;
}

.vision-goals .text-container {
    flex: 1 1 48%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.25rem;
}

.vision-goals .text-container.vg-right {
    align-items: start;
    position: relative;
    overflow: hidden;
}

.vision-goals .text-container.vg-left {
    align-items: end;
    position: relative;
    overflow: hidden;
}

.vision-goals .text-container>div {
    max-width: 43.75rem;
    text-align: left;
}

.vision-goals h4 {
    color: #1F363D;
    font-size: 1.8rem;
    font-family: 'Akro-bold';
    line-height: 2.55rem;
}

.vision-goals p {
    font-size: 1.4rem;
    font-family: 'Akro-Light';
    line-height: 2.15rem;
    margin-top: 1.7rem;
}

.bg-penta-right-home {
    z-index: -1;
    position: absolute;
    right: -23rem;
    top: -45rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(30deg) scale(1);
}

.bg-penta-left-home {
    z-index: -1;
    position: absolute;
    left: -23rem;
    top: -50rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(30deg) scale(1);
}

.bg-penta-right {
    z-index: -1;
    position: absolute;
    right: -18.75rem;
    top: 12.75rem;
    width: 43.75rem;
    height: 43.75rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(-30deg) scale(1.3);
}

.bg-penta-left {
    z-index: -1;
    position: absolute;
    left: -11.25rem;
    bottom: 15.875rem;
    width: 43.75rem;
    height: 43.75rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(30deg) scale(1.3);
}

.bg-penta-right-contact {
    z-index: -1;
    position: absolute;
    right: -29rem;
    top: 5rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(-29deg);
}

.bg-penta-right-media {
    z-index: -1;
    position: absolute;
    right: -29rem;
    top: 5rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    /* clip-path: polygon(64% 61%, 100% 54%, 100% 100%, 50% 100%); */
    transform: rotate(-29deg);
}

.bg-penta-right-ot {
    z-index: -1;
    position: absolute;
    right: -29rem;
    top: 2rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    /* clip-path: polygon(64% 61%, 100% 54%, 100% 100%, 50% 100%); */
    transform: rotate(-29deg);
}

.bg-penta-left-ot {
    z-index: -1;
    position: absolute;
    left: -29rem;
    top: 50rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    /* clip-path: polygon(64% 61%, 100% 54%, 100% 100%, 50% 100%); */
    transform: rotate(-50deg);
}

.bg-penta-right-priv,
.bg-penta-right-tou,
.bg-penta-right-press {
    z-index: -1;
    position: absolute;
    right: -29rem;
    top: 2rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(-29deg);
}

.bg-penta-left-priv,
.bg-penta-left-tou,
.bg-penta-left-press {
    z-index: -1;
    position: absolute;
    left: -25rem;
    top: 55rem;
    width: 67.5rem;
    height: 67.5rem;
    background-color: rgba(207, 207, 207, 0.08);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transform: rotate(30deg);
}

.partners-container {
    padding-top: 6rem !important;
}

.partners {
    padding-bottom: 3.125rem !important;
    background-image: linear-gradient(180deg, rgba(219,244,223,1) 0%, rgba(255,255,255,1) 50%);
    position: relative;
}

.partners .content {
    padding-top: 2.5rem;
    width: 61.25rem;
    text-align: center;
    max-width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Akro-SemiBold';
    margin-top: 2.5rem;
    margin-bottom: 0;
    line-height: 2.2rem;
}

.text-no-wrap {
    display: inline-block;
    white-space: pre-wrap;
    word-break: keep-all;
}

.partners .left-triangle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: 1.25rem solid #fff;
    border-right: 1.25rem solid transparent;
}

.partners .right-triangle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 1.25rem solid #fff;
    border-left: 1.25rem solid transparent;
}

.partner-text {
    font-size: 1.4rem;
    font-family: 'Akro-Regular';
    width: 50rem;
}

.press-container,
.contact-us-container,
.our-team-container {
    padding-top: 6.25rem;
    max-width: 72.8125rem;
    margin: 0 auto;
    z-index: 500;
}

.press-container .press-title {
    text-align: left;
    font-size: 2.25rem;
    font-family: 'Akro-bold';
}

.press-date {
    color: #2F4F66;
    font-size: 1.35rem;
    font-family: 'Akro-Light';
}

.press-container .content {
    font-size: 1.4rem;
    font-family: 'Akro-Regular';
    line-height: 1.85rem;
}

.press-container .content ul li {
    color: #1F363D;
}
.press-container .content p {
    color: #1F363D;
    margin-bottom: 0;
}


.press-container .content p.title {
    color: #2F5066;
}

.press-container ul li::marker {
    font-size: 1rem;
}

.press-container .contact-details>* {
    margin: 0;
}

.press-container,
.tou-container,
.priv-policy-container {
    color: #2F5066;
}

.press-container .title {
    font-size: 1.7rem;
}

.tou-container .title,
.priv-policy-container .title {
    font-size: 1.7rem;
}

.tou-container .sub-title,
.priv-policy-container .sub-title {
    font-family: 'Akro-bold';
    font-style: italic;
}


.tou-container .content p,
.priv-policy-container .content p {
    margin-bottom: 0;
}

.tou-container span.label,
.priv-policy-container span.label {
    margin-right: 0.75rem;
}

.tou-container .sub-label,
.priv-policy-container .sub-label {
    margin-right: 0.75rem;
}

.tou-container .circle-label,
.priv-policy-container .circle-label {
    font-size: 1rem;
}

.tou-container .reminder,
.priv-policy-container .reminder {
    font-style: italic;
    font-family: 'Akro-bold';
}

.press-container a {
    color: #005744;
}

.press-container .title,
.press-container .contact-title,
.press-container .contact-details a,
.tou-container .title,
.priv-policy-container .title {
    font-family: 'Akro-bold';
}

/* Tooltip container */
.tltip {
    color: #094EA0 !important;
}

.tooltip-inner {
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-family: 'Akro-Light';
}

.custom-tooltip {
    --bs-tooltip-color: #333;
    --bs-tooltip-bg: #F2F2F2;
    --bs-tooltip-max-width: 22.25rem;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-padding-x: 10px;
    --bs-tooltip-padding-y: 10px;
}

.tooltip-inner a,
.tooltip-inner a:hover {
    color: #005744;
    text-decoration: underline;
}

.tou-container,
.priv-policy-container {
    max-width: 81.25rem;
    margin-left: auto;
    margin-right: auto;
}

.tou-container .content,
.priv-policy-container .content {
    font-family: 'Akro-Light';
    font-size: 1.4rem;
    line-height: 1.85rem;
}

.tou-container .content a,
.priv-policy-container .content a {
    color: #005744;
}

.contact-us-container {
    padding-top: 0;
}

.contact-us-container .pentagreen-logo {
    width: 100%;
    max-width: 11rem;
}

.contact-us-container .section-title {
    text-align: left;
}

.contact-us-container p,
.contact-us-container ol li {
    font-size: 1.4rem;
    line-height: 2.15rem;
    font-family: 'Akro-Regular';
    margin: 0;
}

.contact-us-container a {
    color: #005744;
    font-family: 'Akro-bold';
}

.our-team-container .image-container {
    background-color: #D9E4DF;
    border-radius: 50%;
}

.our-team-container img {
    width: 100%;
    max-width: 31.25rem;
}

.our-team-container .member-name {
    font-size: 1.85rem;
    font-family: 'Akro-bold'
}

.our-team-container .member-position {
    font-size: 1.45rem;
    font-family: 'Akro-Light';
    margin-bottom: 0;
}

.our-team-container button {
    font-size: 3rem;
    background-color: #fff;
    border: 0.0625rem solid transparent;
    border-top-right-radius: 0.625rem;
    border-top-left-radius: 0.625rem;
    padding: 0 1.875rem;
}

.our-team-container button.active {
    background-color: #D8F3DC;
}


.our-team-container .member-info-container {
    border-radius: 0.625rem;
    background-color: #D8F3DC;
}

.our-team-container .member-info {
    font-size: 1.225rem;
    font-family: 'Akro-Regular';
}


/* Media Library */
.coltitle {
    padding: 1.0625rem 0.625rem;
    border-bottom: 0.0625rem solid #c9cbcc;
}


p.pr-date:hover,
p.pr-content:hover {
    color: none;
}

.container-media-library {
    width: 67.5rem;
    max-width: 100%;
}

.coltitle>span {
    cursor: pointer;
}

span.plus,
span.minus {
    cursor: pointer;
    position: relative;
    top: -0.2rem;
}

.text-line-title-faqs {
    display: inline-block;
    float: left;
    width: 100%;
    cursor: pointer;
}

.year_parent span {
    color: #005744;
}

.month_parent span {
    color: #094EA0;
}

.coltitle {
    padding: 0.625rem;
   font-family: "Akro-bold";
    font-size: 1.3125rem;
    display: flex;
    transition: 0.3s;
    text-align: left;
    border-bottom: 0.0625rem solid #eaeced;
    position: relative;
}

.colsubtitle {
    padding: 0.625rem;
    font-family: "Akro-bold";
    font-size: 1.3125rem;
    display: flex;
    transition: 0.3s;
    text-align: left;
    border-bottom: 0.0625rem solid #eaeced;
    position: relative;
}

p.pr-content {
    padding: 0.625rem;
    color: #005744;
    font-size: 1.1875rem;
    display: flex;
    transition: 0.3s;
    text-align: left;
    position: relative;
}

p.pr-date {
    padding: 0.625rem 0.625rem 0rem 0.625rem;
    color: black;
    font-size: 1.1875rem;
    display: flex;
    transition: 0.3s;
    text-align: left;
    position: relative;
    margin-bottom: 0;
}

.coltitle>span {
    transform: scale(1.7);
    display: inline-block;
}

.colsubtitle>span {
    transform: scale(1.7);
    display: inline-block;
}

.coltitle[aria-expanded="true"]>span.minus,
.colsubtitle[aria-expanded="true"]>span.minus {
    display: inline-block;
}

.coltitle[aria-expanded="true"]>span.plus,
.colsubtitle[aria-expanded="true"]>span.plus {
    display: none;
}

.coltitle>span.minus,
.colsubtitle>span.minus {
    display: none;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.pr-link {
    color: #00b0a9;
    text-decoration: none;
}

/* End of Media Library */



/* Mobile Navigation Menu */

.hamburger-box {
    width: 3.75rem;
}

.hamburger:hover,
.hamburger.is-active:hover {
    opacity: 1;
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
    width: 3.75rem;
    height: 0.3125rem;
    background-color: #2a5a52;
    border-radius: 0;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #2a5a52;
}

.mobile-nav-container {
    position: fixed;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5490196078431373);
    z-index: 110;
    transition: 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

.mobile-nav-container.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
}

.mobile-nav-container .mobile-menu-container {
    position: absolute;
    width: 100%;
    max-width: 100%;
    top: 0;
    background-color: #fff;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: 0.4s ease-in;
    pointer-events: none;
    padding-bottom: 6.875rem;
}

.mobile-nav-container .mobile-menu-container {
    margin-top: 12.875rem;
    transition: 0.5s ease;
    right: 0;
    bottom: 0;
    opacity: 1;
    right: 0;
    pointer-events: auto;
    padding-bottom: 6.875rem;
}

.mobile-nav-container.open .mobile-menu-container {
    transition: 0.5s ease;
    right: 0;
    bottom: 0;
    opacity: 1;
    right: 0;
    pointer-events: auto;
    padding-bottom: 6.875rem;
}

.mobile-nav-container ul {
    font-size: 2.125rem;
    padding-left: 7rem;
}

.mobile-nav-container ul li a {
    color: #1F363D;
    font-family: "Akro-Regular";
}

.mobile-nav-container ul li a:hover {
    font-family: 'Akro-bold';
}

.sm-btn {
    width:12rem;
}

.md-btn {
    width: 18.5rem;
}

/* End of Mobile Navigation Menu */

.fs-3 {
    font-size: 1.4rem;
    
}

.fs-4 {
    font-size: 1.4rem !important;
}
.link-a{
    color: #005744;
}

/* notification */
#notification{
    position: fixed;
    width: 28.125rem;
    max-width: 95%;
    min-height: 9.375rem;
    right: 1.25rem;
    bottom: 1.25rem;
    background-color: white;
    border: 0.125rem solid #005744;
    border-radius: 1.1875rem;
    font-size: 1.0625rem;
    z-index: 99999;
}
#notification .close{
    cursor: pointer;
    position: absolute;
    right: 0.9375rem;
    top: 0.625rem;
}
#notification .content{
    padding: 2.1875rem 1.875rem;

}
#notification .btn-lnk{
    color: #005744;
}

.caption{
    font-size: 1.125rem;
    line-height: 1.5rem;
}
.media-list .text,
.media-news-list .title{
    font-size: clamp(15px, 2vw, 1.2rem);
    color:#2b7364 ;
    font-weight: bold;
}
.media-list .date,
.media-news-list .date{
    color: #3b5064;
    font-size: clamp(13px, 2vw, 1rem);
}
.media-news-list .date{
    font-size: clamp(15px, 2vw, 1.2rem);
}
.media-news-list .text{
    font-size: clamp(15px, 2vw, 1.2rem);
    color: #3b5064;
}

.custom-pos {
    position: relative;
    top: -4rem;
}

.bii-logo   {
    position: relative;
    width:17rem;
    top:-4.375rem;
}

@media (max-width:7680px) {
    html {
        font-size: 45px;
    }
}

@media (max-width:5120px) {
    html {
        font-size: 30px;
    }
}

@media (max-width:3840px) {
    html {
        font-size: 25px;
    }
}

@media (max-width:3264px) {
    html {
        font-size: 22px;
    }
}

@media (max-width: 2560px) {
    html {
        font-size: 17px;
    }
}

@media (max-width: 1920px) {
    html {
        font-size: 16px;
    }
    .home-content-text {
        margin-right: 0;
    }
}

@media (max-width: 1600px) {

    .hsbc-logo {
        width: 10.6875rem;
    }

    .temasek-logo {
        width: 11.625rem;
    }

    .asian-development-bank-logo {
        width: 17.0625rem;
    }

    .clifford-capital-holdings-logo {
        width: 21.125rem;
    }
}

@media (max-width: 1500px) {

    .hsbc-logo {
        width: 9.6875rem;
    }

    .temasek-logo {
        width: 10.625rem;
    }

    .asian-development-bank-logo {
        width: 16.0625rem;
    }

    .clifford-capital-holdings-logo {
        width: 20.125rem;
    }
}

@media (max-width: 1400px) {

    html {
        font-size: 1rem;
    }

    .home-logo-section-3 ul {
        padding-left: 0;
    }

    .home-logo-section-3 ul li {
        flex: 1 1 45%;
        padding: 0 1.25rem !important;
    }

    .home-logo-section-3 ul li:nth-child(even) {
        display: flex;
        justify-content: start !important;
    }

    .home-content-text {
        font-size: 1.5rem;
    }

    .home-logo-section-3 ul li:nth-child(odd) {
        display: flex;
        justify-content: end !important;
    }


    .bg-penta-right-home {
        transform: rotate(30deg) scale(0.8);
    }

    .bg-penta-left-home {
        top: -34.375rem;
        transform: rotate(20deg) scale(0.5);
    }

    .bg-penta-right {
        transform: rotate(-30deg) scale(1.2);
    }

    .bg-penta-left {
        transform: rotate(30deg) scale(1.2);
    }
    
    .hsbc-logo {
        margin-top: 1.125rem;
        width: 12.6875rem;
    }

    .temasek-logo {
        width: 13.625rem;
    }

    .asian-development-bank-logo {
        width: 19.0625rem;
        margin-top: 0.9375rem;
    }

    .clifford-capital-holdings-logo {
        width: 21.125rem;
        margin-top: 0.125rem;
    }

    .home-content-text {
        font-size: 1.3rem;
        line-height: 1.7rem;
    }

}

@media (max-width: 1200px) {

    html {
        font-size: 0.9375rem;
    }

    .top-menu.fadedbg{
        background-color: #ffffffcf;
        box-shadow: 0.0625rem 0.0625rem 0.3125rem #363636;
    }

    .list-style-none {
        list-style: none;
    }

    .home-logo-section-3 ul {
        padding-left: 0;
    }

    .home-logo-section-3 ul li {
        flex: 1 1 45%;
        padding: 0 1.25rem !important;
    }

    .home-logo-section-3 ul li:nth-child(even) {
        display: flex;
        justify-content: start !important;
    }

    .home-logo-section-3 ul li:nth-child(odd) {
        display: flex;
        justify-content: end !important;
    }


    .home-content-text {
        font-size: 1.45rem;
        line-height: 1.75rem;
    }

    .bg-penta-right-home {
        transform: rotate(30deg) scale(0.8);
    }

    .bg-penta-left-home {
        top: -34.375rem;
        transform: rotate(20deg) scale(0.5);
    }

    
    .press-container .title {
        font-size: 1.925rem;
    }

    .tou-container .title,
    .priv-policy-container .title {
        font-size: 2.55rem;
    }

    .tou-container .content,
    .priv-policy-container .content {
        font-size: 1.475rem;
    }

    .bg-penta-left {
        left: -13.25rem;
        bottom: 10.875rem;
        transform: rotate(30deg) scale(1.1);
    }

    .bg-penta-right {
        right: -25.75rem;
        top: 9.375rem;
        transform: rotate(-30deg) scale(1.1);
    }



    .bg-penta-right-priv,
    .bg-penta-right-tou,
    .bg-penta-right-press {
        transform: rotate(-29deg) scale(0.9);
    }

    .bg-penta-left-priv,
    .bg-penta-left-tou,
    .bg-penta-left-press {
        transform: rotate(30deg) scale(0.9);
    }

    
    
    .top-menu .menu li {
        width: 10.2rem;
    }

    .top-menu .menu li a:hover {
        font-family: 'Akro-bold';
    }

    .top-menu .menu li:nth-child(2) {
        width: 12rem;
    }

    .top-menu .menu li:nth-child(3) {
        width: 12rem;
    }    

    .top-menu .menu li:nth-child(4) {
        width: 6rem;
    }
}

@media (max-width: 992px) {

    html {
        font-size: 1rem;
    }

    body {
        /* padding-top: 12.875rem; */
    }

    .header {
        padding-top: 12.875rem;
    }

    .header #big_penta {
        top: -106rem !important;
        height: 500% !important;
        width: 130% !important;
        left: -15% !important;
    }

    .top-menu {
        height: 12.875rem;
        position: fixed;
        top: 0;
        /* background-color: white; */
        width: 100%;
        z-index: 99999;
        left: 0;
        transition:200ms ease-in;
        opacity: 1;
    }

    
    .section-two-index img {
        height:100%;
        min-height: 100%;
    }

    .top-menu.sub{
        background-color: transparent;
    }
    .top-menu.hidden{
        opacity: 0;
        pointer-events: none;

    }
    .top-menu.fadedbg{
        background-color: #ffffffcf;
        box-shadow: 0.0625rem 0.0625rem 0.3125rem #363636;
    }
    .top-menu .logo img {
        width: 10.75rem;
    
    }

    .top-menu .logo {
        transition: 500ms;
    }

    .top-menu .logo {
        opacity: 1;
    }

    .top-menu .logo.active-logo {

    }

    .top-menu .logo.active-logo img{
        margin-left: 0px;
    }

    .list-style-none {
        list-style: none;
    }

    .top-menu .menu li a {
        color: #1F363D;
        font-size: 2.125rem;
        font-family: "Akro-Regular";
        padding: 0rem 3.5rem;
    }


    .top-menu .menu li a:hover {
        font-family: "Akro-bold";
    }

    .hamburger-box {
        width: 5.55rem;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        height: 0.5rem;
        width: 5.55rem;
    }
    
    .hamburger-inner::before {
        top: -1.5rem;
    }

    .hamburger-inner::after {
        bottom: -1.5rem;
    }
    
    .top-menu .logo img {
        width: 11.05rem;
        margin-left: 1.5375rem;
    }

    .home-banner {
        
        padding-top: 12.875rem;
        justify-content: center !important;
        align-items: center !important;
    }

    .home-banner .text-banner {
        width: 51.5rem;
        text-align: center;
        margin-bottom: 0;
    }

    .home-banner .carousel-item img {
        height: 75vh;
    }

    .home-banner .text-banner h1 {
        font-size: 4.75rem;
    }
    
    .home-banner .text-banner p {
        font-size: 2.35rem;
    }
    

    .home-content-text {
        font-size: 1.9rem;
        line-height: 2.17rem;
    }

    .home-logo-section-3 ul li:nth-child(1) a {
        margin-right: 2.5rem;
    }

    .home-logo-section-3 ul li:nth-child(2) a {
        margin-left: 3.5rem;
    }

    .title-wrap img {
        max-width: 10.625rem;
        top: -4.25rem;
        left: -6.375rem;
    }

    .partners .content,
    .partner-text {
        font-size: 1.925rem;
        line-height: 2.5rem;
    }

    .green-box img {
        width: auto;
    }

    .ceo-content p {
        font-size: 1.8rem;
        line-height: 2.15rem;
    }

    .sm-btn {
        width: 13rem;
    }

    .md-btn {
        width:20.75rem;
    }

    .link-button,
    .link-button-slim {
        font-size: 1.8rem;
    }

    .page-title {
        font-size: 4.25rem;
    }

    .title-container {
        padding-top: 2rem;
        align-content: start;
        height: 13.5rem;
    }

    .tooltip-inner {
        font-size: 1.275rem;
        line-height: 1.375rem;
    }
    
    .custom-tooltip {
        --bs-tooltip-max-width: 21.25rem;
    }

    .press-container .press-title {
        font-size: 2.15rem;
    }

    .press-container .title {
        font-size: 1.5rem;
    }

    .tou-container .title,
    .priv-policy-container .title {
        font-size: 2.125rem;
    }

    .clippy-about{
        position: relative;
        right: -2.2rem;
        clip-path: polygon(44% 2%, 106% 2%, 105% 97%, 45% 97%, 33% 78%,17% 49%);
        display: block;
    }

    .press-container .content {
        font-size: 1.575rem;
        line-height: 1.95rem;
    }

    .tou-container .content,
    .priv-policy-container .content {
        font-size: 1.375rem;
    }

    .bg-penta-right-ot {
        top: 0;
        transform: rotate(-29deg) scale(.8);
    }

    .bg-penta-right-media {
        transform: rotate(-29deg) scale(.8);
    }

    .bg-penta-right-contact {
        transform: rotate(-29deg) scale(.8);
    }

    .bg-penta-left-ot {
        top: 38rem;
        left: -32rem;
        transform: rotate(29deg) scale(.2);
    }

    .bg-penta-left-home {
        top: -46.375rem;
        transform: rotate(20deg) scale(0.2);
        left: -29rem;
    }

    .bg-penta-right {
        right: -20.75rem;
        top: 8.125rem;
        transform: rotate(-30deg) scale(0.8);
    }

    .bg-penta-left {
        left: -18.25rem;
        bottom: 30rem;
        transform: rotate(30deg) scale(0.4);
    }

    .bg-penta-right-priv,
    .bg-penta-right-tou,
    .bg-penta-right-press {
        transform: rotate(30deg) scale(0.8);
    }

    .bg-penta-left-priv,
    .bg-penta-left-tou,
    .bg-penta-left-press {
        transform: rotate(30deg) scale(0.4);
    }

    .coltitle,
    .colsubtitle {
        font-size: 1.4125rem;
    }

    p.pr-date,
    p.pr-content {
        font-size: 1.2875rem
    }


    .vision-goals .left-about-content {
        flex-direction: column-reverse;
    }

    .vision-goals h4 {
        font-size: 2.25rem;
    }

    .vision-goals p, .press-date {
        font-size: 1.35rem;
        font-family: 'Akro-Light';
    }

    .about div.text {
        font-size: 1.35rem;
    }


    .vision-goals p {
        font-size: 1.65rem;
        font-family: 'Akro-Regular';
        line-height: 2.5rem;
    }

    footer .seperator::after {
        content: '';
        
    padding: 0rem 3.125rem 0 0;
    }

    footer .container-fluid {
        flex-direction: column;
    }

    footer .container-fluid > div > ul {
        font-size: 1.45rem;
        padding-left: 0 !important;
    }

    footer .container-fluid > div:first-child {
        margin-top: 1.775rem;
        margin-bottom: 1.375rem;
    }

    footer .container-fluid > div:last-child {
        margin-bottom: 3.375rem;
    }
    
    footer .container-fluid > div:first-child > ul li:last-child {
        /* margin-right: 4.25rem; */
    }

    footer .container-fluid > div:nth-child(2) > ul li:last-child {
        /* margin-right: -2.0625rem; */
    }

    .filter-shadow {
        filter: drop-shadow(0px 10px 7px #a0a0a0);
    }

    .hsbc-logo {
        margin-top: 0.6875rem;
    }

    .clifford-capital-holdings-logo {
        width: 21.125rem;
    }
    #notification{
        position: fixed;
        width: 450px;
        max-width: 95%;
        min-height: 150px;
        bottom: 20px;
        background-color: white;
        border: 2px solid #005744;
        border-radius: 19px;
        font-size: 17px;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #notification .content{
        padding: 18px 30px;
 
    }
    #notification .close {
        right: 10px;
        top: 7px;
    }

    
    .bii-logo   {
        top:-4.575rem;
    }

    .custom-pos {
        top: 0.5rem;
    }

}

@media (max-width: 768px) {

    html {
        font-size: 0.7125rem;
    }

    .tooltip-inner {
        font-size: 1.375rem;
        line-height: 1.75rem;
    }
    
    .custom-tooltip {
        --bs-tooltip-max-width: 22.25rem;
    }

    .hamburger-box {
        width: 6.55rem;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        height: 0.5rem;
        width: 6.55rem;
    }
    
    .hamburger-inner::before {
        top: -1.5rem;
    }

    .hamburger-inner::after {
        bottom: -1.5rem;
    }

    
    .top-menu .logo img {
        width: 12.05rem;
        margin-left: 1.5375rem;
    }



    .fs-4-5 {
        font-size: 1.9rem;
    }

    .fs-5-5 {
        font-size: 1.425rem;
    }

    .home-logo-section-3 ul {}

    .home-logo-section-3 ul li {
        flex: 1 1 45%;
        padding: 0 1.25rem !important;
    }

    .home-logo-section-3 ul li:nth-child(even) {
        display: flex;
        justify-content: start !important;
    }

    .home-logo-section-3 ul li:nth-child(odd) {
        display: flex;
        justify-content: end !important;
    }

    .home-content-text {
        font-size: 1.9rem;
        line-height: 2.75rem;
    }

    .page-title {
        font-size: 4.15rem;
    }

    .title-container {
        padding-top: 1rem;
        align-content: start;
    }

    .title-wrap img {
        max-width: 10.625rem;
        top: -3.25rem;
        left: -5.375rem;
    }

    .hsbc-logo {
        width: 12.9375rem;
        margin-right: 4rem !important;
    }

    .temasek-logo {
        width: 13.875rem;
    }

    .asian-development-bank-logo {
        width: 21.0625rem;
        margin-right: 2rem !important;
    }

    .clifford-capital-holdings-logo {
        width: 23.125rem;
        margin-top: 0.205rem;
    }

    
    .ceo-content p {
        font-size: 2.1rem;
        line-height: 2.15rem;
    }

    .contact-us-container .pentagreen-logo {
        max-width: 17.375rem;
    }

    .contact-us-container p,
    .contact-us-container ol li{
        font-size: 1.825rem;
        line-height: 2.225rem;
    }
    
    .bg-penta-right-media, 
    .bg-penta-right-contact {
        top: 2rem;
        transform: rotate(-29deg) scale(.6);
    }


    .bg-penta-right-priv,
    .bg-penta-right-tou,
    .bg-penta-right-press {
        transform: rotate(-29deg) scale(0.6);
    }

    .bg-penta-left-priv,
    .bg-penta-left-tou,
    .bg-penta-left-press {
        transform: rotate(30deg) scale(0.4);
    }

    .vision-goals p,
    .press-date {
        font-size: 1.75rem;
    }

    .vision-goals h4 {
        font-size: 2.45rem;
    }

    .about div.text {
        font-size: 1.25rem;
    }


    .vision-goals p {
        font-size: 1.85rem;
        font-family: 'Akro-Regular';
        line-height: 2.5rem;
    }

    .press-contaienr .press-title {
        font-size: 2.35rem;
    }

    .press-container .title{
        font-size: 1.75rem;
    }

    .tou-container .title,
    .priv-policy-container .title {
        font-size: 2.375rem;
    }

    .press-container .content,
    .tou-container .content,
    .priv-policy-container .content {
        font-size: 1.775rem;
        line-height: 2.15rem;
    }

    .coltitle,
    .colsubtitle {
        font-size: 1.9125rem;
    }

    p.pr-date,
    p.pr-content {
        font-size: 1.7875rem
    }

    .seperator::after {
        content: "|";
        padding: 0rem 1.125rem;
    }

    .vision-goals .content {
        display: flex;
        flex-direction: column;
        height: 46.5625rem;
    }

    .bg-penta-left-home {
        left: -25rem;
        transform: rotate(20deg) scale(0.2);
    }

    .bg-penta-right {
        right: -20.75rem;
        top: 1.25rem;
        transform: rotate(-30deg) scale(0.7);
    }

    .bg-penta-left {
        left: -19.25rem;
        bottom: 35rem;
        transform: rotate(30deg) scale(0.4);
    }

    .text-1 div.text,
    .text-2 div.text {
        font-size: 1.675rem;
    }

    footer .container-fluid > div > ul {
        font-size: 1.45rem;
    }

    footer .container-fluid > div:first-child > ul li:last-child {
        /* margin-right: 5.1rem; */
    }
    footer .container-fluid > div:nth-child(2) > ul li:last-child {
        /* margin-right: -1.0625rem; */
    }

    .info-team p {
        line-height: 1.925rem;
    }

    .bii-logo   {
        top:-4.375rem;
    }

    .custom-pos {
        top: -2rem;
    }

}

@media (max-width: 660px) {

    .bii-logo   {
        top:-4.375rem;
    }

}

@media (max-width: 576px) {
    html {
        font-size: 0.65rem;
    }

    .mobile-nav-container ul {
        font-size: 2.125rem;
        padding-left: 7rem;
    }

    .bg-penta-right-home {
        transform: rotate(30deg) scale(0.7);
    }

    .bg-penta-left-home {
        left: -28rem;
        top: -46.375rem;
        transform: rotate(20deg) scale(0.2);
    }

    .bg-penta-left {
        left: -20.25rem;
        bottom: 29rem;
        transform: rotate(30deg) scale(0.35);
    }

    .bg-penta-right {
        right: -17.75rem;
        top: -1.25rem;
        transform: rotate(-30deg) scale(0.5);
    }

    .title-wrap img {
        max-width: 8.625rem;
        top: -2.25rem;
        left: -2.375rem;
    }

    .home-logo-section-3 ul li {
        flex: 1 1 45%;
        padding: 0 1.25rem !important;
    }

    .home-logo-section-3 ul li:nth-child(even) {
        display: flex;
        justify-content: start !important;
    }

    .home-logo-section-3 ul li:nth-child(odd) {
        display: flex;
        justify-content: end !important;
    }

    .ceo-content p {
        font-size: 1.9rem;
        line-height: 2.1rem;
    }

    .vision-goals h4 {
        font-size: 2.25rem;
        line-height: 2.7rem;
    }

    .about div.text {
        font-size: 1.65rem;
    }


    .vision-goals p {
        font-size: 1.85rem;
        font-family: 'Akro-Regular';
        line-height: 2.5rem;
    }

    .hsbc-logo {
        margin-top: 13px;
        width: 11.9375rem;
    }

    .temasek-logo {
        width: 12.875rem;
    }

    .asian-development-bank-logo {
        width: 23.0625rem;
    }

    .clifford-capital-holdings-logo {
        width: 24.125rem;
        margin-top: 0.358rem;
    }

    .header::after {
        height: 115% !important;
        background: linear-gradient(45deg, #D8F3DC, white 56% 43%, #D8F3DC);
        clip-path: polygon(0 0, 100% 0, 94% 88%, 13% 100%);
    }

    .text-1 div.text,
    .text-2 div.text {
        font-size: 1.775rem;
    }

    .contact-us-container p,
    .contact-us-container ol li {
        font-size: 2.325rem;
        line-height: 2.725rem;
    }

    .coltitle,
    .colsubtitle {
        font-size: 2.1125rem;
    }

    p.pr-date,
    p.pr-content {
        font-size: 1.9875rem
    }

    .bg-penta-left-priv,
    .bg-penta-left-tou,
    .bg-penta-left-press {
        left: -28rem;
        transform: rotate(30deg) scale(0.2);
    }
    
    .custom-pos {
        position: relative;
        top: -1rem;
    }

    .bii-logo   {
        top:-2.375rem;
    }
}

@media (max-width: 480px) {

    html {
        font-size: 0.55rem;
    }

    .hamburger-box {
        width: 7.5rem;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        height: 0.6rem;
        width: 7.5rem;
    }
    
    .hamburger-inner::before {
        top: -1.65rem;
    }

    .hamburger-inner::after {
        bottom: -1.65rem;
    }

    
    .top-menu .logo img {
        width: 13.05rem;
        margin-left: 1.5375rem;
    }

    .home-content-text {
        font-size: 2rem;
        line-height: 2.35rem;
    }

    .partners .content, .partner-text {
        font-size: 2.025rem;
        line-height: 2.35rem;
    }

    .ceo-content p {
        font-size: 2.025rem;
        line-height: 2.35rem;
    }

    .text-1 div.text,
    .text-2 div.text {
        font-size: 1.975rem;
    }

    .hsbc-logo {
        margin-top: 0.8125rem;
    }

}

 @media (max-width: 430px) {
    html {
        font-size: 0.45rem;
    }

    .home-content-text {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }

    .partners .content, .partner-text {
        font-size: 2.125rem;
        line-height: 2.45rem;
    }

    .ceo-content p {
        font-size: 2.125rem;
        line-height: 2.45rem;
    }
    .text-1 div.text,
    .text-2 div.text {
        font-size: 2.275rem;
    }

    .hsbc-logo {
        margin-top: 0.625rem;
    }

    .bii-logo   {
        top:-4.575rem;
    }
    
 }

 @media (max-width: 375px) {
    html {
        font-size: 0.43rem;
    }

    
    .hamburger-box {
        width: 7.5rem;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        height: 0.55rem;
        width: 7.5rem;
    }
    
    .hamburger-inner::before {
        top: -1.65rem;
    }

    .hamburger-inner::after {
        bottom: -1.65rem;
    }

    
    .top-menu .logo img {
        width: 13.05rem;
        margin-left: 1.5375rem;
    }

    .home-content-text {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }

    .partners .content, .partner-text {
        font-size: 2.125rem;
        line-height: 2.45rem;
    }

    .ceo-content p {
        font-size: 2.125rem;
        line-height: 2.45rem;
    }

    .text-1 div.text,
    .text-2 div.text {
        font-size: 1.975rem;
    }

    .hsbc-logo {
        margin-top: 0.625rem;
    }

    .clifford-capital-holdings-logo {
        margin-top: 0.40rem;
    }

 }

 @media (max-width: 320px) {
    html {
        font-size: 0.38rem;
    }

    .hamburger-box {
        width: 6.55rem;
    }
    
    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        height: 0.65rem;
        width: 6.55rem;
    }

    
    .hamburger-inner::before {
        top: -1.438rem;
    }

    .hamburger-inner::after {
        bottom: -1.438rem;
    }
 }

@media (max-height: 768px) {
    .au-container {
        height: 100% !important;
    }

    .au-container > div{
        height: 100% !important;
    }

    .au-container > div > div{
        height: 100% !important;
    }

    .au-container > div > div > div {
        height: 100% !important;
    }

    .au-container > div > div > div > div {
        height: 100% !important;
        margin-top: 10%;
        margin-bottom: 10%;
    }
}

@keyframes highlight-text {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 100%;
        opacity: 1;
    }
}


@keyframes header-bg-rotate {
    0% {
        transform: rotate(var(--init-deg));
    }

    100% {
        transform: rotate(var(--final-deg));
    }
}


@keyframes inner-pentagon {
    from {
        transform: rotate(4) scale(0.5,);
    }
    to {
        transform: rotate(-8deg) scale(1.3);
    }

}

@keyframes pull-down {

    from {
        height: 0;
        display: none;
    }

    to {
        height: 100%;
        display: block;
    }

}

@keyframes pull-up {

    from {
        height: 100%;
        display: block;
    }

    to {
        height: 0;
        display: none;
    }

}

@keyframes opacity0to1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}