.navbar-expand-lg {
    transition: 0.3s ease-in;
}

header {
    /* background: #fff; */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    /* border-bottom: 1px solid #e9ecf4; */
    background: linear-gradient(180deg, rgba(45, 32, 23, 1) 0%, rgba(45, 32, 23, 0.83) 67%, rgba(45, 32, 23, 0) 100%);
}

.navbar-brand img {
    height: 45px;
    transition: 0.3s ease-in;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-weight: 500;
    position: relative;
    padding: 0;
    font-size: 16px;
    transition: 0.1s ease-in;
    color: var(--white);
}



.navbar-expand-lg .navbar-nav .nav-link:hover::before {
    left: 0;
    right: auto;
    width: 100%;
}

.sticky-header {
    background: #2d2017;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.sticky-header .navbar {
    align-items: center !important;
}

.sticky-header .navbar-brand {
    padding: 0;
}

/* main {
    padding-top: 81px;
} */


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

.bg-darks {
    background: #2d2017;
}


.navbar-brand {
    color: var(--white);
}


.navbar .dropdown-toggle::after,
.menu-item-has-children>a:after {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    font-family: 'fontAwesome';
    content: "\f078";
    font-weight: 900;
    border: none;
    font-size: 10px;
}

.navbar-nav .dropdown-menu {
    border: none;
    border-radius: 15px;
    padding: 15px 0;
    margin: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in;
    transform: translateY(15px) translateX(50%);
    position: absolute;
    z-index: 9999;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    top: 40px;
    min-width: 10rem;
    width: max-content;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px 0px;
    color: var(--black);
    right: 50%;
    left: unset;
}

.navbar-nav .dropdown-menu .dropdown-item {
    padding: 5px 25px;
    color: var(--black);
    font-weight: 500;
    display: block;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0) translateX(50%);
    visibility: visible;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item::after {
    width: 0;
    height: 1.5px;
    background: var(--accent-color);
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
    content: '';
    position: absolute;
    border-radius: 50px;
    transition: 0.3s ease-in;
}

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

.navbar-nav .nav-item:hover .nav-link {
    color: var(--accent-color);
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.menu-item-has-children .sub-menu a:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus,
.menu-item-has-children .sub-menu a:focus {
    background: transparent;
}

.bg-lights {
    background: var(--lightgrey);
}

.banner-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.banner-text h1,
.banner-text h2 {
    font-size: 55px;
    line-height: 1;
    margin-bottom: 0;
    color: var(--accent-color);
}

.banner-text h1 {
    font-size: 80px;
    margin-bottom: 25px;
}

.banner-text p {
    font-size: 20px;
    padding-top: 15px;
    margin-top: 55px;
    border-top: 1px solid var(--accent-color);
    display: inline-block;
    color: var(--accent-color);
}

.footer-section {
    background: url(../images/banner/footer-1.webp)no-repeat top right;
    background-size: cover;
}

.footer-section p {
    font-size: 14px;
    color: var(--accent-color);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    text-decoration: none;
    color: var(--accent-color);
    font-size: 14px;
    transition: .3s;
}

.banner-padding-btm {
    padding-top: 50px;
}

.bank-logo img {
    width: 100%;
    height: 50px;
    object-fit: contain;
}

.logo-swiper, .director-swiper {
    padding-bottom: 70px;
}

.bank-logo {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
}

.logo-swiper .swiper-pagination-bullet, .director-swiper .swiper-pagination-bullet {
    background: var(--primary-color);
    width: 10px;
    height: 10px;
}

.work-box {
    text-align: center;
    background: #2d2017;
    color: #fff;
    padding: 25px;
    border-radius: 150px;
    font-size: 25px;
}

.work-box span {
    display: block;
    font-size: 14px;
    color: var(--accent-color);
}

.work-box span i {
    font-size: 25px;
    color: var(--primary-color);
}

.corp-box h4 {
    font-size: 16px;
    border-bottom: 1px dashed var(--black);
    padding-bottom: 10px;
    height: 50px;
}

.corp-box p {
    font-size: 14px;
}

.banner-wheel {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: auto;
}

.banner-wheel img {
    /* animation: spin 100s linear infinite; */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.leader-text {
    padding-left: 25px;
    /* background: var(--accent-color); */
    position: relative;

}

.leader-text-inner {
    text-align: center;
    padding-bottom: 70px;
}

.leader-card {
    padding-bottom: 125px;
    background-image: url(../images/abt-bg2.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 165px;
    padding-left: 285px;
    padding-right: 200px;
    flex: 0 0 1567px;
    width: 1567px;
    height: 100%;
}

.leader-text-inner p {
    min-height: 270px;
}

.leader-card img {
    height: 625px;
    width: auto !important;
}

.leader-card-wrapper {
    height: 100%;
    width: max-content;
    display: flex;
    overflow: hidden;
}

.fy-cards-wrapper {
    padding: 35px;
    /* border: 1px solid #fff; */
    border-radius: 20px;
    background: #f2e8de;
}

.fy-card h2 {
    font-size: 20px;
    color: #fff;
}

.fy-card h2 span {
    font-size: 30px;
}

.fy-cards-wrapper h4 {
    /* padding: 15px;
    background: #2d2017;
    margin-bottom: 35px; */
    font-size: 30px;
    color: #fff;
    margin-bottom: 35px;
}

.fy-card {
    text-align: center;
}

.text-grey {
    color: var(--white);
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.text-grey span {
    width: 300px;
    height: 1px;
    background: var(--white);
}

.fy-card p {
    font-size: 15px;
    color: #ffffffbf;
}

.fy-section {
    position: relative;
    height: 1100px;
    overflow: hidden;
}

.fy-cards-wrapper-outer {
    position: relative;
    height: 790px;
}

.fy-cards-wrapper {
    position: absolute;
    /* inset: 0; */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 100%;
    overflow: hidden;
    min-height: 500px;

    transform-origin: center top;
}

.fy-card h2 span.plus {
    font-size: 40px;
}

.revenue-chart {
    position: relative;
}

.revenue-chart-title {
    margin-bottom: 5px;
    font-size: 14px;
    margin-top: 25px;
    text-align: center;
}

.revenue-chart-title strong {
    color: var(--primary-color);
    font-size: 16px;
}

.revenue-chart-title span {
    color: var(--black);
}

.revenue-chart>div[id] {
    width: 100%;
    height: 380px;
}

.revenue-chart {
    border: 1px solid #d1b7a0;
}

.kpi-swiper .swiper-pagination-bullet {
    background: var(--primary-color);
    opacity: 0.5;
    width: 0.8rem;
    height: 0.8rem;
    transition: 0.7s all ease;
    border-radius: 2rem;
}

.kpi-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 4rem;
}

.kpi-swiper {
    padding-bottom: 70px;
}

.strategy-box {
    width: 20%;
    flex-shrink: 0;
    text-align: center;
}

.strategy-img {
    width: 100px;
    margin: 0 auto;
}

.strategy-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--title-font);
    font-size: 25px;
}

.strategy-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #946943;
}

.strategy-box h4 {
    margin-bottom: 0;
}

.fy-cards-wrapper1 {
    background: linear-gradient(226deg, rgba(255, 183, 3, 1) 0%, rgba(255, 76, 0, 1) 100%);
}

.fy-cards-wrapper2 {
    background: linear-gradient(226deg, rgba(67, 171, 255, 1) 0%, rgba(0, 44, 209, 1) 100%);
}

.fy-cards-wrapper3 {
    /* background: linear-gradient(226deg, rgb(155, 209, 7) 0%, rgba(27, 117, 0, 1) 100%); */
    background: linear-gradient(
    135deg,
    rgb(45, 32, 23) 0%,
    rgb(71, 45, 26) 100%
);
}

.fincap h4 {
    color: #4c004f;
}

.mancap h4 {
    color: #377488;
}

.intcap h4 {
    color: #3caae1;
}

.humcap h4 {
    color: #a21c43;
}

.soccap h4 {
    color: #e64e68;
}

.natcap h4 {
    color: #1f6533;
}

.value-flow {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;margin-top: 35px;gap: 10px;
}

.value-flow-box {
    width: 100%;
    min-height: 75.19px;
    background: #efd9bd;
    color: var(--primary-color);
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    padding: 15px;
    font-family: var(--title-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid var(--primary-color);
}

.value-flow-arrow {
font-size: 35px;color: #2d2017;    padding-bottom: 10px;display: block;

}

.capital-box h4 {
    position: absolute;
    top: 70px;
    width: 100%;
    padding-top: 25px;
    padding-right: 35px;
    padding-left: 35px;
    left: 0;
    font-size: 30px;
}

.capital-box-img img {
    height: 670px;
}
.capital-box::after {
    content: "\f0a9";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
   left: 50%;
    top:200px;
    font-size:25px;
    color: var(--primary-color);
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: all 0.3s ease;
    z-index: 5;
}

.capital-box:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}.capital-box {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.capital-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
.pillar-box p {
    font-weight: 600;
}
.policy-card {
    width: 100%;
    background-image: url(../images/icons/badge-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px;
    height: 165px;
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        color 0.35s ease;
    color: var(--black2);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

/* Arrow indicator */
.policy-card::after {
    content: "\f35d";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    bottom: 20px;
    font-size: 14px;
    opacity: 0;
    transform: translate(-10px, -50%);
    transition: all 0.3s ease;
}

/* Hover */
.policy-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    color: var(--primary-color);
}

/* Reveal arrow */
.policy-card:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}



.awards-single ul li::marker {
    color: var(--primary-color);
}

.awards-single {
    padding: 25px;
    background: var(--lightgrey);
}

.awards-single ul {
    margin-bottom: 0;
    padding-left: 1rem;
    margin-top: 25px;
}

.awards-single ul li {
    font-size: 14px;
}

.awards-single h4 {
    margin-bottom: 0;
    font-size: 20px;
}

.reveal-text {
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transform: translateY(30px);
}

.inner-banner {
    background: url("../images/bg-pattern.webp")no-repeat top left;
    background-size: cover;

}

.inner-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2d2017;
    opacity: 0.8;
    filter: blur(5px);
}

.inner-banner {
    padding-top: 130px;
}

.standards-frame {
    position: relative;
    background-image: url(../images/frame.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 55px 75px;
}

.standards-intro {
    margin-bottom: 22px;

    color: var(--primary-color);
    line-height: 1.55;
}

.standards-list {
    margin: 0;
    padding-left: 20px;
}


.standards-list li {
    margin-bottom: 10px;
    font-size: 14px;
}

.standards-list li::marker {
    color: var(--primary-color);
}

.asso-line-wrapper {
    height: 100%;
}

.asso-line {
    width: 1px;
    background: var(--primary-color);
    display: inline-block;
    height: 100%;
}

.asso-line-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

.asso-line-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

.emails {
    padding: 10px;
    border-radius: 100px;
    border: 1px solid #2d2017;
    color: #2d2017;
    padding-right: 25px;
    font-weight: 600;
}

.feedback-row {
    padding: 35px;
    border-radius: 15px;
    background: var(--lightgrey);
}



/* ---------------------------------------------------------
   COMMON CARD
--------------------------------------------------------- */

.statement-card {
    position: relative;


    background: var(--accent-color);
    height: 100%;

    color: var(--black);
}


/* thin outer border */

.statement-card::before {
    content: "";

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(164, 113, 65, .45);

    pointer-events: none;
}


/* inner corner decoration */

.statement-card::after {
    content: "";

    position: absolute;

    inset: 23px;

    border: 1px solid rgba(164, 113, 65, .15);

    pointer-events: none;
}


.statement-card-inner {
    position: relative;
    z-index: 2;

    padding: 45px;
}


/* ---------------------------------------------------------
   ORNAMENTAL RULE
--------------------------------------------------------- */

.statement-rule {
    width: 90px;
    height: 2px;

    margin: 32px 0 35px;

    background: var(--primary-color);

    position: relative;
}


.statement-rule::after {
    content: "";

    position: absolute;

    right: -12px;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translateY(-50%) rotate(45deg);

    background: var(--primary-color);
}

.msg-bg {
    padding-bottom: 400px;
    background-image: url(../images/msg-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 300px;
    padding-left: 200px;
    padding-right: 200px;
}

.msg-body {
    margin-top: -120px;
    position: relative;
    background: linear-gradient(180deg, rgba(254, 236, 222, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.msg-bg p {
    /* font-family: "Edu SA Beginner", cursive; */
    font-size: 18px;
    color: var(--black2);
}

.ques-line span {
    padding: 10px 25px;
    background: var(--primary-color);
    color: var(--white);
}

.ques-line {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--primary-color);
    margin-top: 25px;
}

.op-box h5 {
    color: var(--black2);
    margin-bottom: 15px;
}

.resp-box {
    background-image: url(../images/abt-bg2.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 80px 120px;
}

.resp-box p {
    margin-bottom: 0;
}

.op-box .strategy-circle::before {
    display: none;
}

.op-box .strategy-img {
    margin: 0;
    display: inline-block;
}

.op-box .strategy-circle {
    display: inline-block;
    margin-bottom: 25px;
}

.op-box ul li::marker {
    color: var(--primary-color);
}

.op-box {
    padding: 35px;
    border: 1px solid var(--primary-color);
    height: 100%;
}

.year-text-wrappper h4 {
    font-size: 18px;
}

.year-text-wrappper p {
    font-size: 14px;
}

.mine-yera {
    display: inline-block;
    line-height: 1.3;
    font-family: var(--title-font);
      color: var(--primary-color);
    font-size: 55px;
    line-height: 1.3;
    padding: 5px 25px;position: relative;
}

.year-text-wrappper {
    /* padding-top: 25px; */
    /* display: flex;
    gap: 25px; */
height: 100%;
    position: relative;
}

.year-ball {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;display: none;
}

/* .year-text-wrappper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 1px;
    height: 100%;
    background: var(--primary-color);
} */

.year-text {
    background: rgb(254, 236, 222);
    padding: 25px;
    border-radius: 10px;height: 100%;
}.mile-box .text-center::before{
 content: '';
    position: absolute;
    top: 50%;width: 100%;height: 1px;background: var(--primary-color);left: 0;transform: translateY(-50%);
}.mile-box .text-center{
    z-index: 1;
}

.map-legend{
    text-align: center;background: var(--accent-color);padding: 25px;border-radius: 10px;
}.map-legend img{
width: 35px;margin-bottom: 15px;
}.milestone-tab .nav-link{
    padding: 0;border-radius: 0;
}.milestone-tab .nav-link.active{
    background: transparent;
}.milestone-tab .nav-link.active .mine-yera{
        background-image: url(../images/icons/badge-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}.port-box1 img{
    width:auto;margin-bottom: 25px;height: 100px;
}.port-box1{
    padding: 25px;background: var(--accent-color);height: 100%;
}.port-box1 li::marker{
    color: var(--primary-color);
}.port-box1 li{
    margin-bottom: 8px;font-size: 14px;
}.port-box1 ul{
    padding-left: 1rem;
}.port-box1 h4{
    margin-bottom: 15px;
}.inner-strat ul{
margin-bottom: 0;margin-top: 15px;padding-left: 1rem;
}.inner-strat ul li{
    margin-bottom: 8px;font-size: 14px;
}.inner-strat ul li::marker{
    color: var(--primary-color);
}.strat-text{
    padding: 25px;
}.inner-strat .strategy-img{
    margin: 0;
}.inner-strat .strategy-number{
left: 15.5%;
}.color-grey{
    color: var(--black2);text-decoration: underline;
}



.foundation-card {
    position: relative;
    height: 100%;
    padding: 35px;
    background: #fff;
    border: 1px solid #e5dfd7;
    transition: all .35s ease;
    overflow: hidden;
}
.foundation-card img{
    height: 75px;margin-bottom: 15px;
}
/* .foundation-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: width .35s ease;
} */

.foundation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(30, 36, 40, .10);
}

.foundation-card:hover::before {
    width: 100%;
}


.foundation-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.foundation-list li {
    position: relative;
    padding: 9px 0 9px 20px;
    border-top: 1px solid #eee9e3;
    font-size: 14px;
}

.foundation-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
}



.target-card {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--accent-color);
    transition: all .3s ease;border-radius: 150px;text-align: center;
}

.target-card:hover {
  
    transform: translateY(-5px);
}

.target-card:hover .target-number,
.target-card:hover h4,
.target-card:hover p {
    color: #fff;
}

.target-number {
    color: var(--primary-color);
}


.target-card p {
    color: var(--accent-color);
    margin: 0;font-family: var(--title-font);
    transition: color .3s ease;
}

.target-card p strong {
    color: inherit;
}
.strategy-wrapper-1 .strategy-box{
    width: 25%;
}.strategy-wrapper-1 .strategy-box h3{
    margin-bottom: 15px;
}.capital-tag{
    padding: 5px 10px;color: #fff;display: inline-block;border-radius: 50px;margin-top: 15px;font-size: 12px;
}.strategy-wrapper-1 .strategy-box h4{
    color: var(--black2);margin-bottom: 15px;margin-top: 25px;
}.strategy-wrapper-1 .strategy-box p{
    font-size: 14px;
}.strategy-wrapper-1 .strategy-box .strategy-number {
    left: 12.5%;
}.capital-tag.intcap{
background: #3caae1;
}.capital-tag.mancap{
background: #377488;
}.capital-tag.natcap{
background: #1f6533;
}.capital-tag.fincap{
background: #4c004f;
}.capital-tag.humcap{
background: #a21c43;
}.capital-tag.soccap{
background: #e64e68;
}






/* =========================================
   REPORTING STANDARDS CARD
========================================= */

.standards-card {
    padding: 35px;
    background: #2d2017;
    color: #fff;
    position: relative;
    overflow: hidden;
}


.standards-title {
    position: relative;
    z-index: 1;

    margin: 0 0 18px;

}

.standards-title span {
    color: var(--primary-color);
}


/* =========================================
   STANDARD ITEMS
========================================= */

.standard-item {
    position: relative;
    z-index: 1;

    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
}.standard-item:first-child{
    border: none;padding-top: 0;
}

.standard-last {
    padding-bottom: 0;
}

.standard-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.standard-number {
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.standard-heading h3 {
    margin: 0;

    font-size: 18px;
    font-weight: 600;
    color: #fff;
}


/* =========================================
   STANDARD TAGS
========================================= */

.standard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-left: 30px;
}

.standard-tags span {
    display: inline-flex;
    align-items: center;

    padding: 3px 11px;

    border: 2px solid #b8b1b6;
    border-radius: 30px;
background: #36332b;
    color: #b8b8b6;
    font-size: 11px;
font-weight: 600;
    transition: all .25s ease;
}
.standard-tags1 span{
background: #b8b1b6;color: var(--black2);
}
.standard-tags span:hover {
    color: #fff;
    border-color: #d96f24;
    background: #d96f24;
}


/* =========================================
   SDG BOXES
========================================= */

.sdg-tags {
    display: flex;
    gap: 8px;
    padding-left: 30px;flex-wrap: wrap;
}

.sdg-box img{
height: 75px;
}
.philosophy-card a{
    color: #2d2017;text-decoration: underline;
}
/* =========================================
   SASB / IFRS DESCRIPTION
========================================= */

.standard-description {
    padding-left: 30px;
    margin: 0;

    color: #b8b1b6;
    font-size: 12px;
    line-height: 1.65;
}

.standard-description strong {
    color: #fff;
}


/* =========================================
   PHILOSOPHY CARD
========================================= */

.philosophy-card {
    position: relative;

    padding: 45px;

    background: #fff;
    border: 1px solid #e4ded6;

    box-shadow: 0 20px 60px rgba(31, 37, 41, .06);
}


/* =========================================
   PRINCIPLE CARDS
========================================= */

.principle-card {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid #e8e3dd;

    transition: all .3s ease;
}

.principle-card:last-child {
    border-bottom: 0;
}

.principle-number {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--lightgrey);
    border: 1px solid var(--primary-color);
    border-radius: 50%;

    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;

    transition: all .3s ease;
}

.principle-card:hover .principle-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.principle-content h3 {
    margin: 0 0 10px;

    color: var(--black2);
    font-size: 17px;
    font-weight: 600;
}



.stakeholder-card {
      background-image: url(../images/abt-bg2.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 55px 90px;
    text-align: center;
    height: 100%;
}



.stakeholder-card-content h3 {

    margin: 0 0 18px;

    font-size: 28px;
}

.stakeholder-card-content h3 span {
    color: var(--primary-color);
}

.stakeholder-card-content p {

    margin: 0;
}




.impact-list {
    border-top: 1px solid rgba(255, 255, 255, .16);margin-top: 35px;
}


/* =========================================
   IMPACT ROW
========================================= */

.impact-row {
   display: flex;
    gap: 35px;
    align-items: center;

    padding: 30px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .16);

    transition:
        background .35s ease,
        padding .35s ease;
}

.impact-row:hover {
    padding-left: 25px;
    padding-right: 25px;

    background: rgba(255, 255, 255, .035);
}


/* =========================================
   INDEX
========================================= */

.impact-index {
    align-self: stretch;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    padding-top: 3px;
}

.impact-index span {
    color: var(--primary-color);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


.impact-topic h3 {

    margin: 0;

    color: #fff;

    font-size: 20px;

    transition: color .3s ease;
}
.impact-topic{
    width: 30%;flex-shrink: 0;
}
.impact-row:hover .impact-topic h3 {
    color: var(--primary-color);
}


/* =========================================
   DESCRIPTION
========================================= */

.impact-description {
    position: relative;
}

.impact-description::before {
    content: "";

    position: absolute;
    left: -18px;
    top: 4px;

    width: 1px;
    height: calc(100% - 8px);

    background: rgba(255, 255, 255, .12);
}

.impact-description p {
    max-width: 620px;

    margin: 0;

    color: var(--accent-color);

    font-size: 13px;
}

.grievance-table {

    width: 100%;
    font-size: 13px;margin-top: 25px;
}

.grievance-table thead th {
    padding: 15px;

    background: transparent;

    font-size: 13px;
    font-weight: 700;
    text-transform: none;
background: #2d2017;color: var(--primary-color);
    border-top: 1px solid var(--black2);
    border-bottom: 1px solid var(--black2);
}

.grievance-table tbody td {
    padding: 15px;

    line-height: 1.6;

    border-color: #b8afa6;
}

.grievance-table tbody td:first-child {
    background: var(--accent-color);
}

.grievance-table tbody tr {
    transition: background-color .25s ease;
}

.grievance-table tbody tr:hover {
    background: #fff;
}

.grievance-table a {
    color: var(--primary-color);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.grievance-table a:hover {
    text-decoration: underline;
}
.grievance-table tbody tr td:last-child{
    width: 250px;
}



    .value-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .value-table {
        width: 100%;
        min-width: 1250px;
        border-collapse: collapse;
        table-layout: fixed;
        
    }

    .value-table th,
    .value-table td {
        vertical-align: top;
        padding: 12px 14px;
        border: 0;
    }

    /* =========================================
       COLUMN WIDTHS
    ========================================= */

    .value-table th:nth-child(1),
    .value-table td:nth-child(1) {
        width: 13%;
    }

    .value-table th:nth-child(2),
    .value-table td:nth-child(2) {
        width: 15%;
    }

    .value-table th:nth-child(3),
    .value-table td:nth-child(3) {
        width: 22%;
    }

    .value-table th:nth-child(4),
    .value-table td:nth-child(4) {
        width: 15%;
    }

    .value-table th:nth-child(5),
    .value-table td:nth-child(5) {
        width: 24%;
    }

    .value-table th:nth-child(6),
    .value-table td:nth-child(6) {
        width: 11%;
    }


    /* =========================================
       HEADINGS
    ========================================= */

    .value-table thead th {
        text-align: center;
        padding-bottom: 20px;
    }

    .table-heading {
           background-image: url(../images/icons/badge-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-flex;
    line-height: 1.2;
    font-family: var(--title-font);
    color: var(--primary-color);
    font-size: 20px;
    padding: 10px 25px;
    position: relative;font-weight: 500;height: 68px;justify-content: center;align-items: center;
    }

   

    /* =========================================
       EACH DATA ROW
    ========================================= */

    .value-table tbody tr {
        vertical-align: top;
    }

    .value-table tbody td {
        border-bottom: 1px dotted var(--black);
    }

    .value-table tbody tr:last-child td {
        border-bottom: 0;
    }


    /* =========================================
       CAPITAL TITLE
    ========================================= */

    .capital-title {
        margin: 0 0 10px;

        color: var(--black2);

        
        font-size: 16px;
        font-weight: 700;
        line-height: 1.15;
    }


    /* =========================================
       LISTS
    ========================================= */

    .value-table ul {
        margin: 0;
        padding-left: 15px;
    }

    .value-table li {
        margin-bottom: 8px;

        font-size: 14px;
        line-height: 1.35;
    }

    .value-table li::marker {
        color: var(--primary-color);
        font-size: 9px;
    }

    .value-table strong {
        font-weight: 700;
    }


    /* =========================================
       OPERATIONS IMAGE
    ========================================= */

    .operations-cell {
        padding: 0 10px !important;
        text-align: center;

        vertical-align: middle !important;

        border-bottom: 0 !important;
    }

    .operations-image {
        display: block;

        width: 100%;
        height: auto;

        margin: 0 auto;
    }


    /* =========================================
       SDG COLUMN
    ========================================= */

    .sdg-cell {
        vertical-align: middle !important;
        text-align: center;

        border-bottom: 1px dotted var(--black);
    }

    .sdg-grid {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: 5px;

        max-width: 95px;
        margin: 0 auto;
    }

    .sdg-grid img {
        display: block;

        width: 34px;
        height: 34px;

        object-fit: contain;
    }


    /* =========================================
       REMOVE BORDER AROUND ROWSPAN IMAGE
    ========================================= */

    .operations-cell {
        border-bottom: 0 !important;
    }
 /* =====================================================
           CAPITAL ROW
        ===================================================== */

        .capital-row {
            margin-bottom: 35px;
        }


        /*
         * Header for each capital
         */

        .capital-heading {
            display: flex;
      flex-direction: column;
            gap: 15px;

            margin-bottom: 30px;
        }


        .capital-image {
            height: 110px;

           width: 155px;

            object-fit: cover;

            border-radius: 14px;

            box-shadow:
                0 8px 25px rgba(0,0,0,.12);flex-shrink: 0;
        }


        .capital-heading-content {
            flex: 1;
        }


        .capital-name {
            margin: 0;

            font-size: clamp(25px, 3vw, 36px);

            font-weight: 600;
        }


        .capital-description {
            margin-top: 8px;

            font-size: 15px;
        }


        /* =====================================================
           RELATIONSHIP INTRO
        ===================================================== */

        .relationship-heading {
            display: flex;
            align-items: center;
            gap: 15px;

            margin-bottom: 18px;
        }


        .relationship-line {
            width: 35px;
            height: 2px;

            background: var(--primary-color);
        }


        .relationship-heading span {

            color: #806c59;

            font-weight: 700;

            letter-spacing: 1.2px;

            text-transform: uppercase;
        }


        /* =====================================================
           RELATIONSHIP GRID
        ===================================================== */

        .relationship-grid {

            display: grid;

            grid-template-columns:
                repeat(5, minmax(0, 1fr));

            gap: 12px;
        }


        /* =====================================================
           RELATIONSHIP CARD
        ===================================================== */

        .relationship-card {

            background: #fffaf3;

            border: 1px solid var(--border);

            border-radius: 14px;

            padding: 22px 18px;
height: 100%;

            transition:
                transform .2s ease,
                box-shadow .2s ease,
                border-color .2s ease;
        }


        .relationship-card:hover {

            transform: translateY(-4px);

            border-color: var(--primary-color);

            box-shadow:
                0 12px 30px rgba(70, 45, 25, .08);
        }


        /* =====================================================
           TARGET CAPITAL
        ===================================================== */

        .target-capital {

            display: flex;
            align-items: center;

            gap: 9px;

            margin-bottom: 18px;
        }


        .target-dot {

            width: 8px;
            height: 8px;

            flex: 0 0 8px;

            background: var(--primary-color);

            border-radius: 50%;
        }


        .target-capital span {

            color: var(--primary-color);


            font-weight: 700;

            letter-spacing: .8px;

            text-transform: uppercase;
        }


        /* =====================================================
           ARROW
        ===================================================== */

        .relationship-arrow {

            color: var(--primary-color);

            font-size: 20px;

            margin-bottom: 14px;
        }


        /* =====================================================
           CARD TEXT
        ===================================================== */

        .relationship-card p {

            margin: 0;


            font-size: 14px;
        }


        /* =====================================================
           ROW DIVIDER
        ===================================================== */

        .capital-row + .capital-row {

            padding-top: 35px;

            border-top: 1px solid #00000046;
        }
.orange-count h2{
    color: var(--primary-color);
}.orange-count p{
    color: var(--black);
}







/* =========================================================
   CARD
========================================================= */

.capital-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 42px 38px 38px;

    background: var(--accent-color);

    border: 1px solid #d8c4ad;

    position: relative;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* Small top accent */

.capital-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 65px;
    height: 4px;

    background: var(--primary-color);
}


/* Optional hover */

.capital-card:hover {
    transform: translateY(-7px);

    background: #f6eadb;

    box-shadow:
        0 18px 45px rgba(92, 62, 38, .10);
}


/* =========================================================
   HEADING
========================================================= */

.card-heading {
    min-height: 150px;
}



/* =========================================================
   BODY
========================================================= */

.card-body-content {
    padding-top: 25px;
margin-top: 25px;
    margin-bottom: 35px;

    border-top: 1px solid #d5c0aa;
}


.card-body-content p {
    margin: 0 0 15px;


    font-size: 14px;
}

.card-body-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FACTS
========================================================= */

.card-facts {
    margin-top: auto;

    border-top: 1px solid #d5c0aa;
}


.card-fact {
    padding: 19px 0;

    border-bottom: 1px solid #d5c0aa;
}


.card-fact:last-child {
    border-bottom: 0;
}


.card-fact strong {
    display: block;

    margin-bottom: 5px;

    color: var(--primary-color);
font-family: var(--title-font);

    font-size: 19px;

    line-height: 1.1;

    font-weight: 400;
}





 

        /* ==========================
           MATRIX WRAPPER
        ========================== */

        .matrix-wrapper {
            position: relative;
            padding-left: 75px;
            padding-bottom: 65px;
        }

        .matrix {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border-left: 1px solid var(--primary-color);
            border-top: 1px solid var(--primary-color);
            max-width: 100%;
            aspect-ratio: 1 / 0.4;
        }

        /* ==========================
           MATRIX CELLS
        ========================== */

        .matrix-cell {
            position: relative;
            border-right: 1px solid var(--primary-color);
            border-bottom: 1px solid var(--primary-color);
            min-width: 0;
        }

        .cell-important {
            background:#d9efdf;
        }

        .cell-significant {
            background: var(--accent-color);
        }

        .cell-critical {
            background:#feecde;
        }

        /* ==========================
           CELL LABEL
        ========================== */

        .cell-heading {
            position: absolute;
            top: 8px;
            left: 8px;
            font-size: 16px;
            font-style: italic;
            color: var(--primary-color);
        }

        /* ==========================
           TOPIC
        ========================== */

        .topic {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 7px;
            cursor: pointer;
            font-size: 14px;
            line-height: 1.2;
            transition: all .25s ease;
            z-index: 5;
        }

        .topic:hover {
            color: var(--primary-color);
            transform: scale(1.04);
            z-index: 20;
        }

        .topic-number {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }

        .topic-text {
            white-space: nowrap;
        }

        /* ==========================
           TOP ROW
        ========================== */

        .topic-2 {
            top: 15px;
            left: 40%;
        }

        .topic-10 {
            top: 46%;
            left: 20%;
        }

        .topic-1 {
            top: 22%;
            right: 5%;
        }

        .topic-11 {
            bottom: 13%;
            left: 20%;
        }

        /* ==========================
           MIDDLE ROW
        ========================== */

        .topic-5 {
            top: 40%;
            left: 12%;
        }

        .topic-7 {
            top: 40%;
            right: 8%;
        }

        .topic-8 {
            bottom: 13%;
            right: 8%;
        }

        .topic-15 {
            top: 36%;
            left: 15%;
        }

        .topic-9 {
            top: 23%;
            right: 15%;
        }

        .topic-6 {
            bottom: 7%;
            left: 3%;
        }

        .topic-3 {
            top: 56%;
            left: 48%;
        }

        /* ==========================
           BOTTOM ROW
        ========================== */

        .topic-14 {
            top: 28%;
            right: 10%;
        }

        .topic-4 {
            top: 30%;
            left: 12%;
        }

        /* ==========================
           AXIS
        ========================== */

        .axis-y {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 65px;
            width: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .axis-y-inner {
            position: relative;
            height: 100%;
            width: 100%;
        }

        .axis-y-label {
            position: absolute;
            left: -50px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            white-space: nowrap;
            font-size: 16px;
            font-weight: 700;color: var(--accent-color);
        }

        .axis-y-line {
            position: absolute;
            right: 8px;
            top: 22px;
            bottom: 0;
            border-left: 1px dotted var(--primary-color);
        }

        .axis-y-line:before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 6px solid var(--primary-color);
        }

        .axis-x {
            position: absolute;
            left: 75px;
            right: 0;
            bottom: 0;
            height: 45px;
        }

        .axis-x-line {
            position: absolute;
            left: 0;
            right: 25px;
            top: 12px;
            border-top: 1px dotted var(--primary-color);
        }

        .axis-x-line:after {
            content: "";
            position: absolute;
            right: -6px;
            top: -5px;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 6px solid var(--primary-color);
        }

        .axis-x-label {
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: 700;
            white-space: nowrap;color: var(--accent-color);
        }

       
     
      /* ==========================================
   ESG TOPICS TABLE
========================================== */


.esg-table-wrap {
    width: 100%;
}

/* Table */

.esg-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Header */

.esg-table thead th {
    
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 7px;
    border-bottom: 1px solid var(--primary-color);
    vertical-align: bottom;
    white-space: nowrap;
}

/* Column widths */

.esg-table .pillar-col {
    width: 7%;
}

.esg-table .topic-col {
    width: 30%;
}

.esg-table .priority-col {
    width: 16%;
}

.esg-table .gri-col {
    width: 20%;
}

.esg-table .sdg-col {
    width: 27%;
}

/* Body cells */

.esg-table tbody td {
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    border-bottom: 1px solid var(--primary-color);
    vertical-align: middle;
}


/* Pillar */


/* Topic */

.topic-name {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.topic-number {
    flex: 0 0 auto;
}

/* SDG flex */

.sdg-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    min-height: 30px;
}

.sdg-list img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    display: block;
}

/* Hover */

.esg-table tbody tr {
    transition: background-color .25s ease;
}

.esg-table tbody tr:hover {
    background: rgba(245, 130, 32, .045);
}






/* =========================================================
   STRATEGIC ACTION SECTION
========================================================= */

.strategic-action-section {
    background: #fffdf8;
    color: #303030;
}


/* =========================================================
   HEADING
========================================================= */

.strategic-heading {
    max-width: 850px;
}

.strategic-heading h2 {
    margin: 0 0 10px;
    
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--primary-color);
}

.strategic-heading p {
    max-width: 720px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}


/* =========================================================
   TOPIC
========================================================= */

.strategic-topic {
    position: relative;
    padding: 0 0 35px;
    margin-bottom: 35px;
}

.strategic-topic:not(:last-child) {
    border-bottom: 1px solid rgba(245, 130, 32, .45);
}


/* =========================================================
   TOPIC INTRO
========================================================= */

.topic-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 35px;
}


.topic-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #a26332;
}

.topic-intro h3 {
    margin: 0;
    
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;
}



.content-block {
    height: 100%;
    padding-right: 25px;
}

.content-label {
    display: block;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 15px;

    
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.content-label::after {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin-top: 8px;
    background: var(--primary-color);
}

.content-block p {
    margin: 0;
    font-size: 14px;
}


/* =========================================================
   TARGET
========================================================= */

.target-block {
    padding-left: 25px;
    border-left: 1px solid rgba(245, 130, 32, .35);
}

.target-text {
    max-width: 250px;
    
    font-size: 22px;
}

.target-text strong {
    display: block;
    color: var(--primary-color);
    font-weight: 500;
}


/* =========================================================
   HOVER
========================================================= */

.strategic-topic {
    transition: transform .3s ease;
}

.strategic-topic:hover .topic-number {
    transform: translateX(5px);
}

.topic-number {
    transition: transform .3s ease;
}


.text-black{
    color: var(--black2);
}


/* =========================================
   JSL POLICY FRAMEWORK
   All classes are uniquely prefixed
========================================= */

.jsl-policy-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

    width: 100%;
}


/* =========================================
   POLICY ITEM
========================================= */

.jsl-policy-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 28px;

    min-height: 250px;
    padding: 28px;

    background: rgba(255, 250, 244, 0.72);

    border: 1px solid rgba(141, 100, 47, 0.18);
    border-radius: 4px;

    box-shadow:
        0 12px 35px rgba(74, 45, 18, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* Alternate icon/text direction */

.jsl-policy-item-reverse {
    flex-direction: row-reverse;
}


/* Hover */

.jsl-policy-item:hover {
    transform: translateY(-5px);

    background: rgba(255, 252, 247, 0.95);

    box-shadow:
        0 20px 45px rgba(74, 45, 18, 0.10);
}


/* =========================================
   ICON
========================================= */

.jsl-policy-icon {
    position: relative;

    flex: 0 0 120px;

    width: 120px;
    height: 120px;

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


.jsl-policy-icon::before {
    content: "";

    position: absolute;

    inset: 4px;

 background: #d1b7a0;
    border-radius: 2px;

    transform: rotate(2deg);
}


.jsl-policy-icon img {
    position: relative;

    width: 110px;
    height: 110px;

    object-fit: contain;

    transition: transform 0.4s ease;
}


.jsl-policy-item:hover .jsl-policy-icon img {
    transform: scale(1.06) rotate(-1deg);
}


/* =========================================
   CONTENT
========================================= */

.jsl-policy-body {
    flex: 1;
    min-width: 0;
}


.jsl-policy-body h3 {
    margin: 0 0 15px;

    font-size: 18px;
}


.jsl-policy-body ul {
    margin: 0;
    padding-left: 15px;
}


.jsl-policy-body li {
    margin-bottom: 7px;
    font-size: 14px;
}


.jsl-policy-body li:last-child {
    margin-bottom: 0;
}


.jsl-policy-body li::marker {
    color: var(--primary-color);
    font-size: 9px;
}

.text-orange{
    color: var(--primary-color);padding-left: 10px;border-left: 2px solid var(--primary-color);
}


.jsl-board-legend-items{
    display: flex;flex-wrap: wrap;
}.jsl-board-legend-item{
    color: #fff;width: 20%;flex-shrink: 0;padding: 15px;
}.jsl-board-legend-item strong{display: block;}.jsl-status-box{
    width: 30px;height: 30px;display: inline-block;flex-shrink: 0;
}.jsl-board-legend-item>div{
    display: flex;align-items: center;gap:8px

}.jsl-status-chair{
background: var(--primary-color);
}.jsl-status-member{
    background: #fdd1b0;
}.jsl-board-legend{
    margin-top: 25px;padding: 100px 110px;margin-bottom: 25px;    background-image: url(../images/frame.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}.jsl-board-legend-item span{
    font-size: 14px;
}



.jsl-director-photo {
    flex: 0 0 170px;

    width: 170px;

    display: flex;

    justify-content: center;
}


.jsl-director-photo-frame {
    position: relative;

    width: 170px;
    height: 170px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* Decorative circular frame */

.jsl-director-photo-frame::before {
    content: "";

    position: absolute;

    inset: 4px;

    border: 2px solid #2d2017;

    border-radius: 50%;

    transform: rotate(-3deg);
}


.jsl-director-photo-frame::after {
    content: "";

    position: absolute;

    bottom: -3px;
    left: 50%;

    width: 14px;
    height: 14px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-bottom: 2px solid #2d2017;
    border-right: 2px solid #2d2017;

    background: rgb(254, 236, 222);
}


.jsl-director-photo-frame img {
    position: relative;
    z-index: 1;

    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 50%;
}

.jsl-director-top {
    display: flex;

    align-items: center;

    gap: 35px;margin-bottom: 15px;
}
.jsl-director-committees {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.jsl-director-committees span {
    display: inline-flex;

    align-items: center;
    justify-content: center;
font-size: 12px;

    padding: 5px 10px;

    font-weight: 700;

    line-height: 1;

    color: #ffffff;
}.jsl-director-committees span.jsl-status-member{
    color: var(--black2);
}
.jsl-director-designation {
    margin: 0 0 15px;


    font-size: 14px;

    color:#2d2017;
}.sapo{
    color: #fff;
    padding: 25px;background: var(--primary-color);
}.jsl-director-bio ul li::marker{
    color: var(--primary-color);
}.jsl-director{
    padding: 35px;background:rgb(254, 236, 222);min-height: 625px;
}.out-btn-wrapper{
    position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 100%;z-index: 1;display: flex;justify-content: space-between;
}.out-btn-button-prev, .out-btn-button-next{
    width: 50px;height: 50px;background: var(--primary-color);color: var(--white);display: flex;align-items: center;justify-content: center;border-radius: 50%;
}.out-btn-button-prev{
    margin-left: -25px;
}.out-btn-button-next{
    margin-right: -25px;
}




.risk-box-big{
      padding-bottom: 165px;
        background-image: url(../images/abt-bg2.webp);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 165px;
        padding-left: 200px;
        padding-right: 200px;
        text-align: center;
}
.risk-box-big p{
    color: var(--black2);padding-top: 1rem;border-top: 1px solid #9b6d4c;font-size: 14px;
}


.coso-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

}


/* Header */

.coso-table thead th {
    padding: 0 10px 7px;

    border-bottom: 1px solid #2d2017;

    font-size: 12px;
    font-weight: 700;

    color: #2d2017;
}


.coso-table thead th:first-child {
    width: 30%;
}


/* Body cells */

.coso-table tbody th,
.coso-table tbody td {
    padding: 8px 10px;

    border-bottom: 1px solid rgba(65, 64, 66, 0.65);

    vertical-align: top;

    font-size: 12px;

}


/* Component */

.coso-table tbody th {
    font-weight: 700;

    color: #2d2017;
}


/* Focus area */

.coso-table tbody td {
    font-weight: 400;
}


/* Remove Bootstrap default borders */

.coso-table > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
}


/* =========================================================
   HOVER
========================================================= */

.coso-table tbody tr {
    transition: background-color .25s ease;
}

.coso-table tbody tr:hover {
    background: rgba(245, 130, 32, 0.06);
}




/* =========================================================
   MATRIX OUTER FRAME
========================================================= */

.risk-matrix-wrap {
    position: relative;

    padding: 8px;

    border: 2px solid rgba(139, 96, 49, .55);
margin-top: 35px;font-family: var(--title-font);
    background: var(--accent-color);
}


/* =========================================================
   TABLE
========================================================= */

.risk-matrix-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


/* All cells */

.risk-matrix-table th,
.risk-matrix-table td {
    border: 1px solid rgba(139, 96, 49, .55);

    text-align: center;

    vertical-align: middle;
}


/* =========================================================
   HEADER
========================================================= */

.risk-matrix-table thead th {
    height: 72px;

    padding: 10px 15px;

    background: var(--lightgrey);

    font-weight: 400;
}


.risk-matrix-table thead th:not(.impact-head) {
    width: 15%;
}


.risk-matrix-table thead span {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;

    line-height: 1.2;

    color: var(--primary-color);
}


.risk-matrix-table thead strong {
    display: block;


    font-size: 27px;

    font-weight: 500;

    line-height: 1;

    color: var(--primary-color);
}


/* Risk Impact heading */

.risk-matrix-table .impact-head {
    width: 16%;
}


.risk-matrix-table .impact-head span {

    font-size: 16px;color: var(--black2);
}


.risk-matrix-table .impact-head strong {

    font-size: 16px;
color: var(--black2);
}


/* =========================================================
   ROW HEADERS
========================================================= */

.risk-matrix-table tbody th {
    width: 16%;

    padding: 10px 15px;

    background: var(--lightgrey);

    font-weight: 400;
}


.risk-matrix-table tbody th span {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;

    line-height: 1.2;

    color: var(--primary-color);
}


.risk-matrix-table tbody th strong {
    display: block;


    font-size: 25px;

    font-weight: 500;

    line-height: 1;

    color: var(--primary-color);
}


/* =========================================================
   RISK CELLS
========================================================= */

.risk-matrix-table tbody td {
    height: 65px;

    padding: 10px 15px;

    color: #fff;
}


/* Number */

.risk-matrix-table tbody td strong {
    display: block;

    margin-bottom: 3px;


    font-size: 24px;

    font-weight: 500;

    line-height: 1;
}


/* Description */

.risk-matrix-table tbody td span {
    display: block;


    font-size: 16px;


    line-height: 1.15;
}


/* =========================================================
   MATRIX COLORS
========================================================= */

.risk-significant {
    background: #933c35;
}


.risk-major {
    background:#c65743;
}


.risk-moderate {
    background: #caa04c;
}


.risk-minor {
    background: #b5ae5e;
}


.risk-insignificant {
    background: #8e9f75;
}


/* =========================================================
   LEGEND
========================================================= */

.risk-matrix-legend {
    position: relative;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    column-gap: 70px;
    row-gap: 20px;

    margin-top: 25px;

    padding: 30px 35px;

    border: 2px solid rgba(139, 96, 49, .45);

    background: var(--accent-color);
}


.risk-legend-item {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}


.risk-legend-color {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    margin-top: 2px;
}


.risk-legend-item p {
    margin: 0;

    max-width: 340px;

    font-size: 14px;

    line-height: 1.45;

}

.inner-nav{
    background: var(--accent-color);
}.inner-nav a{
   color: #2d2017;
}.inner-nav li{
    padding: 5px 15px;border-radius: 50px;
}
.inner-nav .active{
    background: #2d2017;
}.inner-nav .active a{
    color: #fff;
}.inner-nav-wrapper {
    position: relative;
    z-index: 100;width: 100%;
}.inner-nav-wrapper.is-fixed {
  width: 100%!important;top: 60px!important;left: 0!important;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;height: auto !important;
}
.fy-card h2 span.gg{
        font-size: 29.1px;
}

.awards-content {
    position: relative;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

/* Fade at bottom when collapsed */
.awards-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        var(--lightgrey)
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.awards-expandable.is-expanded .awards-content {
    max-height: 2000px;
}

.awards-expandable.is-expanded .awards-content::after {
    opacity: 0;
}

.awards-readmore, .bod-readmore {
    border: 0;
    background: transparent;
    padding: 12px 0 0;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.awards-readmore i,  .bod-readmore i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.awards-expandable.is-expanded .awards-readmore i {
    transform: rotate(180deg);
}.bg-darks2{
    background: #9d6e43;
}.esg-table-wrap th{
    background: #2d2017!important;
}.bg-accent{
    background: var(--accent-color)!important;
}.esg-table tbody td.esg-id{
    font-size: 30px;    text-align: center;background: #ebaa728f;
}.bod-msg{
    height:300px;overflow: hidden;
} .bod-readmore{
            padding-left: 1.5rem;
}.jsl-director.expanded .bod-msg{
    height: auto;
}