.people-intro .side-image__inner img {
    margin-left: -5rem;
    object-fit: cover;

    transform: skew(-10deg);
}

@media screen and (max-width: 1280px) {
    .people-intro .intro-card {
        grid-template-columns: 1fr 1fr;
    }

    .people-intro .side-image__inner img {
        margin-left: -10rem;
    }
}

.people-key-figures__after {
    padding: 5rem 10rem 0;
}

@media screen and (max-width: 1024px) {
    .sustainability section.people-key-figures {
        padding: 7.5rem 5rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.people-key-figures {
        padding: 5rem 1rem;
        gap: 1rem;
    }

    .people-key-figures__after {
        padding: 2rem 5rem 0;
    }
}

.sustainability section.oasis {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 5rem 20rem;

    gap: 5rem;
}

.oasis__cards__inner {
    display: flex;
    gap: 1rem;
}

.sustainability .oasis h2 {
    color: var(--darkblue);
}

.oasis__cards {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2rem;
}

.oasis__cards__inner {
    width: 100%;
}

.oasis__cards__hint {
    width: 3rem;
}

.oasis__description {
    padding: 0 10rem;
}

.oasis__letter {
    width: 100%;

    aspect-ratio: 1 / 1.25;

    perspective: 1000px;
    border-radius: 5rem;
    color: #4DABE9;
    user-select: none;
}

.oasis__letter__inner {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 10px;

    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.oasis__letter__inner, .oasis__letter__back {
    box-shadow: var(--box-shadow);
}

.oasis__letter:hover .oasis__letter__inner {
    transform: rotateY(180deg);
}

.oasis__letter__front, .oasis__letter__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 2rem;
}

.oasis__letter__front {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: white;

    font-size: 15rem;

    font-weight: bold;
}

.oasis__letter__back {
    background-color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.oasis__letter__back, .oasis__letter__back p {
    font-size: 1.25rem !important;
}

.sustainability .oasis h3 {
    color: var(--blue);
    font-size: 1.25em;
}

.oasis__letter img {
    height: 4rem;
    width: fit-content;
}

.oasis__letter:nth-child(2) {
    color: #CCCDCC;
}

.oasis__letter:nth-child(3) {
    color: #3477BC;
}

.oasis__letter:nth-child(4) {
    color: #709ED0;
}

.oasis__letter:nth-child(5) {
    color: #CAD7ED;
}

.oasis__swiper {
    display: none;

    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    width: 100%;
}

.oasis__swiper__content-wrapper {
    width: 100%;
    overflow: hidden;
}

.oasis__swiper__letters {
    width: 100%;

    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.oasis__swiper__letters .oasis__letter {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 5rem;

    border-radius: 10px;

    box-shadow: var(--box-shadow);
}

.oasis__swiper__content {
    width: 100%;
}

.oasis__swiper__content__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    padding: 0 5rem;

    text-align: center;
}

.oasis__swiper__content__item img {
    width: 5rem;
}

.oasis__swiper__pagination {
    width: 100%;

    display: flex;
    justify-content: space-between;

    padding: 0 3rem;
    margin-bottom: 2rem;
}

.oasis__swiper__pagination .swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;

    background-color: var(--item-inactive);
}

.oasis__swiper__pagination .swiper-pagination-bullet-active {
    background-color: var(--blue);
}

@media screen and (max-width: 1280px) {
    .sustainability section.oasis {
        padding: 5rem 7.5rem;
        gap: 2.5rem;
    }

    .oasis__letter__front {
        font-size: 12.5rem;
    }

    .oasis__letter__front, .oasis__letter__back {
        padding: 1.5rem;
    }

    .oasis__letter__back, .oasis__letter__back p {
        font-size: 1rem !important;
    }

    .oasis__letter img {
        height: 2.5rem;
    }

    .oasis__letter__back {
        gap: 0.75rem;
    }

    .oasis__description {
        padding: 0 5rem;
    }
}

@media screen and (max-width: 1024px) {
    .oasis__letter__front {
        font-size: 7.5rem;
    }

    .oasis__letter__back {
        gap: 0.5rem;
    }

    .oasis__letter__back, .oasis__letter__back p {
        font-size: 0.75rem !important;
    }

    .oasis__letter img {
        height: 1.75rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.oasis {
        padding: 5rem 2.5rem;
    }

    .sustainability .oasis h3 {
        font-size: 1.5rem;
    }

    .oasis__description {
        padding: 0;
    }

    .oasis__cards {
        display: none;
    }

    .oasis__swiper {
        display: flex;
    }
}

@media screen and (max-width: 480px) {
    .oasis__description {
        padding: 0 2.5rem;
    }

    .oasis__swiper__letters .oasis__letter {
        font-size: 3.5rem;
    }

    .oasis__swiper__content__item {
        padding: 0 2.5rem;
    }
}


.sustainability section.esg-transform-projects {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10rem 20rem;

    gap: 2.5rem;
}

.sustainability .esg-transform-projects h2 {
    padding: 0 10rem;
    margin-bottom: 2.5rem;
    background-color: var(--highlight-bg);

    color: white;
}

.esg-projects__description {
    padding: 0 10rem !important;
}

.esg-transform-projects ul {
    list-style: disc;
}

.esg-transform-projects ul li {
    margin-bottom: 1rem;
}

@media screen and (max-width: 1280px) {
    .sustainability section.esg-transform-projects {
        padding: 5rem;
    }

    .esg-transform-projects .scrollbar {
        margin-top: 0;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.esg-transform-projects {
        padding: 5rem 2.5rem;
    }

    .sustainability section.esg-transform-projects h2 {
        padding: 0 5rem;
    }

    .esg-projects__description {
        padding: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .sustainability section.esg-transform-projects h2 {
        padding: 0 2.5rem;
    }
}


.sustainability .workplace-key-figures .figures {
    padding-bottom: 2.5rem;
}

.sustainability .workplace-key-figures .figures__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sustainability section.esg-target {
    display: flex;
    flex-direction: column;
    gap: 5rem;

    padding: 10rem 20rem 5rem;
}

.esg-target__card {
    overflow: hidden;

    background-color: #C3E6FF;
    box-shadow: var(--box-shadow);
}

.esg-target__card__inner {
    height: 100%;

    margin-right: 5rem;
    margin-left: -5rem;
    padding: 2.5rem 7.5rem 2.5rem 10rem;

    transform: skew(10deg);
    background-color: white;
}

.esg-target__card__text {
    transform: skew(-10deg);
}

.esg-target__card strong {
    color: var(--blue);
    font-size: 3em;
}

.esg-target__card._white {
    background-color: white;
}

.esg-target__card._white .esg-target__card__inner {

}

@media screen and (max-width: 1280px) {
    .sustainability section.esg-target {
        padding: 5rem 10rem;
    }
}

@media screen and (max-width: 1024px) {
    .sustainability section.esg-target {
        padding: 5rem 2.5rem;
    }
}

@media screen and (max-width: 768px) {
    .esg-target__card__inner {
        padding: 2.5rem 2.5rem 2.5rem 7.5rem;
    }
}

.sustainability section.social-programs {
    align-items: center;
    padding: 10rem 20rem;
}

.sustainability section.practices {
    padding: 5rem 20rem 10rem;
    background-color: #C3E6FF;
}

@media screen and (max-width: 1280px) {
    .sustainability section.practices {
        padding: 5rem 10rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.practices {
        padding: 5rem 2.5rem;
    }
}

.practices .slider-tabs {
    background-color: white;
}

.practices .slider-tabs__inner {
    gap: 0;
}

.practices .slider-tabs .scrollbar {
    margin-top: 0;
}

.practices .slider-tabs__titles {
    background-color: #F5F5F5;
}

.practices .slider-tabs__title._active p {
    text-decoration: none;
}

.practices .slider-tabs__title._active {
    background-color: white;
}

.practices .slider-tabs__title {
    margin: 0;
    padding: 2.5rem 5rem !important;
    border-bottom: none;
}

.practices .slider-tabs__inner {
    padding: 0;
}

.practices .slider-tabs__item > ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    padding: 2.5rem 5rem;
}

.sustainability section.sustainable-cities {
    align-items: center;
}

.social-programs h3 {
    font-size: 1.5em;
    text-align: center;
    color: var(--blue);
}

.social-programs section:first-child {
    padding-top: 2.5rem;
}

.social-programs [data-accordion] {
    box-shadow: var(--box-shadow);
}

.social-programs [data-accordion-item] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.social-programs [data-accordion],
.social-programs [data-accordion-content] {
    padding: 0 !important;
}

.social-programs [data-accordion-top] {
    padding: 1.5rem 7.5rem !important;
}

.social-programs [data-accordion-item]:first-child [data-accordion-top] {
    padding-top: 2.5rem !important;
}

.social-programs [data-accordion-item]:last-child [data-accordion-top] {
    padding-bottom: 2.5rem !important;
}

.sustainable-cities__intro {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;

    padding: 5rem;

    overflow: hidden;
}

.sustainable-cities__intro > * {
    z-index: 1;
}

.social-programs ._background {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.social-programs ._background img {
    bottom: 0;
    object-fit: cover;
}

.social-programs ._background__inner {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: fit-content;
}

.social-programs ._background ._overlay {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 100%;
    z-index: 1;

    background: linear-gradient(0, rgb(0, 0, 0, 0) 0%, rgb(255, 255, 255) 100%);
}

.sustainable-cities__results {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    padding: 0 15rem;
}

.sustainable-cities__results__item {
    padding: 2.5rem;
    background-color: white;
}

.sustainable-cities__results__item p {
    color: var(--blue) !important;
}

.sustainable-cities .key-figures {
    padding: 5rem 15rem !important;
}

.sustainable-cities .key-figures .figures {
    overflow: hidden;
}

.sustainable-cities .key-figures .figures__inner {
    grid-template-columns: 2fr 1fr;
}

.social-programs .key-projects {
    padding: 5rem;
    align-items: center;
}

.social-programs .key-projects__table {
    padding: 2.5rem 5rem;

    background-color: white;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.key-projects__table tbody {
    display: block;
    overflow-y: scroll;
}

.key-projects__table table thead,
.key-projects__table table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.key-projects__table tbody {
    max-height: 50rem;
}

.key-projects__table thead tr {
    border-bottom: none;
}

.key-projects__table tr:not(:last-child) {
    border-bottom: 1px solid #C3E6FF;
}

.key-projects__table td {
    padding: 1rem 2rem;
    vertical-align: top;
}

.key-projects__table th {
    padding: 0 0 1rem 0 !important;

    text-align: center;
    font-weight: normal !important;
    color: var(--blue);
}

.key-projects__table td:nth-child(2n + 1) {
    background-color: #e4f1ff;
}

.key-projects__table tr:first-child td:nth-child(2n + 1) {
    border-radius: 10px 10px 0 0;
}

.key-projects__table tr:last-child td:nth-child(2n + 1) {
    border-radius: 0 0 10px 10px;
}

.key-projects__table td:nth-child(1) {
    width: 40%;
}

.key-projects__table td:nth-child(2) {
    width: 25%;

    text-align: center;
    white-space: nowrap;
}

.key-projects__table td:nth-child(3) {
    font-weight: bold;
    text-align: center;
}

.key-projects__table td:nth-child(4) {
    width: 20%;
}

.social-programs .text-additional {
    padding: 5rem;
}

@media screen and (max-width: 1280px) {
    .sustainability section.social-programs {
        align-items: center;
        padding: 5rem 1rem;
    }
}

@media screen and (max-width: 1024px) {
    .sustainable-cities__results {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.key-figures {
        padding: 5rem !important;
    }

    .social-programs [data-accordion-top] {
        padding: 1.5rem 2.5rem !important;
    }

    .social-programs .key-projects {
        padding: 5rem 1rem;
    }

    .social-programs .key-projects__table {
        padding: 2.5rem 1rem;
    }

    .key-projects__table td {
        padding: 1rem;
    }

    .social-programs .description {
        padding: 0 2.5rem;
    }

    .social-programs .text-additional {
        padding: 2.5rem;
    }
}

.city-changes-school__intro {
    padding: 0 5rem;
}

.city-changes-school .key-figures .figures__inner {
    grid-template-columns: 1fr 1fr;
}

.program-blocks, .program-directions {
    padding: 0 0 5rem;
}

.program-blocks__inner, .program-directions__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem
}

.program-blocks__cell, .program-directions__cell {
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
}

.city-changes-school .text-additional {
    padding: 0;
    background: linear-gradient(180deg, rgba(57, 140, 203, 0) 0%, #398CCB 100%);
}

.city-changes-school .text-additional img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .program-blocks__inner, .program-directions__inner {
        grid-template-columns: 1fr;
    }
}

.help-is-easy .text-additional {
    padding: 0;
    background: linear-gradient(180deg, rgba(57, 140, 203, 0) 0%, #398CCB 100%);
}

.help-is-easy .text-additional img {
    width: 100%;
}

.help-is-easy .key-figures .figures__inner {
    grid-template-columns: 1fr 1fr;
}

.scholarship .key-figures .figures__inner {
    grid-template-columns: 1fr 1fr;
}

.scholarship .text-additional {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 0 5rem 5rem;
    background: linear-gradient(180deg, rgba(57, 140, 203, 0) 0%, #398CCB 100%);
}

.link-container {
    width: fit-content;
    padding: 1rem 2rem;
    background-color: white;
}

.link-container p {
    color: var(--blue) !important;
}

.safety-key-figures .figures__inner {
    grid-template-columns: 1fr 1fr !important;
}

.main-description__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 5rem;
    padding-right: 15rem;
}

.main-description__inner .side-image {
    min-height: auto;
}

.main-description__text {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 5rem;
}

@media screen and (max-width: 1280px) {
    .main-description__inner {
        padding-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .main-description__inner {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .main-description__inner .side-image {
        display: block;

        width: 100%;
        min-height: 20rem !important;
        margin-left: -5rem;
    }
}

@media screen and (max-width: 480px) {
    .main-description__text {
        padding: 2.5rem;
    }

    .sustainability section.safety-key-figures {
        padding: 2.5rem !important;
    }
}

.sustainability section.safety-index {
    padding: 5rem 20rem;
}

.sustainability section.safety-index h2 {
    padding-top: 2.5rem;
    color: var(--blue);
}

.safety-index__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.safety-index__chart {
    height: fit-content;
    display: flex;
    align-items: center;
    padding: 4rem 5rem;
    box-shadow: var(--box-shadow);
}

@media screen and (max-width: 1280px) {
    .sustainability section.safety-index {
        padding: 5rem 10rem;
    }

    .safety-index__chart {
        padding: 2.5rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.safety-index {
        padding: 5rem;
    }
}

@media screen and (max-width: 480px) {
    .sustainability section.safety-index {
        padding: 5rem 2.5rem;
    }

    .safety-index__inner {
        grid-template-columns: 1fr;
    }

}

.sustainability section.health-protection,
.sustainability section.emergency-ready {
    padding: 2.5rem 25rem 5rem;
}

.sustainability section.health-protection h2,
.sustainability section.emergency-ready h2 {
    color: var(--blue)
}

.iconed-paragraph-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.iconed-paragraph-list img {
    width: 5rem;
    flex-shrink: 0;
    flex-grow: 0;
}

.iconed-paragraph-list__item {
    display: flex;
    gap: 2.5rem;
    align-items: start;
}

@media screen and (max-width: 1280px) {
    .sustainability section.health-protection,
    .sustainability section.emergency-ready {
        padding: 0 15rem 5rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability section.health-protection,
    .sustainability section.emergency-ready {
        padding: 0 5rem 5rem;
    }
}

@media screen and (max-width: 480px) {
    .sustainability section.health-protection,
    .sustainability section.emergency-ready {
        padding: 0 2.5rem 5rem;
    }

    .iconed-paragraph-list__item {
        flex-direction: column;
        align-items: center;
    }
}