.key-performance {
    background-color: #F5F9FD;
    padding-block: 70px;
}

.key-performance-title {
    font-size: 28px;
    line-height: 30px;
    color: #02428D;
    font-weight: bold;
    padding-bottom: 10px;
}

.key-performance .card {
    position: relative;
    border: 0;
    height: 100%;
}

.key-performance .card .card-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.key-performance .card .card-body {
    padding-top: 45px;
    padding-bottom: 20px;
}

.key-performance .card-img-top {
    width: 85px;
}

.key-performance .card-title {
    font-size: 21px;
    line-height: 30px;
    font-weight: bold;

}

.key-performance .card-text {
    font-size: 12px;
    line-height: 23px;
}

.environmental-content .card {
    background-color: rgb(162 199 58 / 10%);
    border-bottom: 4px solid #A2C73A;
}

.environmental-content .card-title {
    color: #A2C73A;
    line-height: normal;
    padding-top: 20px;
}

.key-performance .nav-link {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

.key-performance .nav-link.active {
    background-color: unset;
}

.environment-nav {
    color: #A2C73A;
}

.social-nav {
    color: #F18700;
}

.economic-nav {
    color: #56A8DD;
}

.environment-nav:hover {
    color: #A2C73A;
}

.social-nav:hover {
    color: #F18700;
}

.economic-nav:hover {
    color: #56A8DD;
}

.social-content .card {
    background-color: rgb(241 135 0 / 10%);
    border-bottom: 4px solid #F18700;
}

.social-content .card-title {
    color: #F18700;
    padding-top: 20px;
}

.economic-content .card {
    background-color: rgb(86 168 221 / 10%);
    border-bottom: 4px solid #0066AB;
}

.economic-content .card-title {
    color: #0066AB;
    padding-top: 20px;
}

.key-performance .down-arrow {
    padding-left: 12px;
}

.env-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    row-gap: 70px;
    column-gap: 20px;
}

.env-card-text {
    font-size: 1rem !important;
    width: 90%;
    text-align: left;
    margin: 0px;
    line-height: 1.6 !important;
}

@media screen and (max-width:1024px) {
    .env-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hidden-box {
        display: none;
    }

    .key-performance .card .card-body {
        padding-top: 30px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width:768px) {
    .key-performance .card .card-body {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .env-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .key-performance-title {
        padding-inline: 20px;
    }

    .key-performance {
        padding-block: 50px;
    }
}

@media screen and (max-width:600px) {
    .env-card-grid {
        display: flex;
        flex-direction: column;
    }

    .env-card-grid .card {
        padding-bottom: 5px;
    }

    .key-performance-title {
        padding-inline: 20px;
    }

    .key-performance .card .card-body {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    .environmental-content .card-title {
        padding-top: 30px;
    }

    .social-content .card-title {
        padding-top: 30px;
    }

    .economic-content .card-title {
        padding-top: 30px;
    }

    .key-performance {
        padding-block: 2.5rem;
    }

    .esg-tabs {
        margin-top: 14px;
        flex-direction: column;
    }

    .esg-tabs button {
        padding: 4px 16px
    }
}