[x-cloak] { display: none !important; }

/* ========== Index ============ */
.home-banner picture img {
  display: block;
  width: 100%;
  height: auto;
}

.home-ceo-message {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 67.4%;
  margin-left: auto;
  padding-top: 150px;
  padding-bottom: 88px;
  background-image: url('../images/home/ceo-message-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.home-ceo-message .text-wrapper {
  width: 44%;
}

.home-ceo-message .image-wrapper {
  flex: 1;
}

.home-ceo-message .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.home-ceo-message .image-wrapper .home-vector-chevron {
  width: 200.46px;
  height: auto;
  margin-right: auto;
  margin-left: 50px;
  margin-top: 50px;
}

.home-ceo-message .section-title {
  padding-bottom: 50px;
}

.home-ceo-message .btn {
  margin-top: 50px;
}

.main-home .home-ceo-transport {
  position: absolute;
  left: 0;
  top: 0;
  width: 27.5%;
  height: auto;
  object-fit: contain;
  display: block;
}

.main-home .home-ceo-vector-01 {
  position: absolute;
  left: 0;
  top: 22%;
  width: 27.5%;
  height: auto;
  object-fit: contain;
  display: block;
}

.home-puzzle-bg {
  background-image: url('../images/home/puzzle-bg_desktop.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

.home-puzzle {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}

.home-puzzle > div {
  width: 52.5%;
  height: auto;
  z-index: 1;
  position: relative;
}

.home-puzzle > div:hover {
  scale: 1.02;
}

.home-puzzle > div:nth-child(even) {
  margin-left: -5%;
  z-index: 2;
}

.home-puzzle img {
  display: block;
}

.home-puzzle .cta-wrapper {
  position: absolute;
}

.home-puzzle .cta-wrapper .btn {
  margin-top: 20px;
}

.home-puzzle .puzzle-a .cta-wrapper {
  top: 60px;
  left: 73px;
  width: 100%;
}

.home-puzzle .puzzle-a .cta-wrapper > img {
  width: 50%;
  height: auto;
}

.home-puzzle .puzzle-b .cta-wrapper {
  bottom: 40px;
  left: 57px;
  width: 100%;
}

.home-puzzle .puzzle-b .cta-wrapper > img {
  width: 44.5%;
  height: auto;
}

.home-puzzle .puzzle-c .cta-wrapper {
  top: 39px;
  left: 30px;
  width: 100%;
}

.home-puzzle .puzzle-c .cta-wrapper > img {
  width: 56.4%;
  height: auto;
}

.home-puzzle .puzzle-d .cta-wrapper {
  top: 40px;
  left: 57px;
  width: 100%;
}

.home-puzzle .puzzle-d .cta-wrapper > img {
  width: 45.8%;
  height: auto;
}

.home-gap-mobile {
  display: none;
}

@media screen and (max-width: 2200px) {
  .home-ceo-message {
    padding-top: 110px;
    padding-bottom: 70px;
  }

  .home-ceo-message .section-title {
    padding-bottom: 40px;
  }

  .home-puzzle .puzzle-a .cta-wrapper {
    top: 13%;
    left: 8%;
  }

  .home-puzzle .puzzle-a .cta-wrapper > img {
    width: 50%;
  }

  .home-puzzle .puzzle-b .cta-wrapper {
    bottom: 8%;
    left: 6.5%;
  }

  .home-puzzle .puzzle-c .cta-wrapper {
    top: 8%;
    left: 4%;
  }

  .home-puzzle .puzzle-d .cta-wrapper {
    top: 8%;
    left: 7%;
  }

  .home-ceo-message .image-wrapper .home-vector-chevron {
    width: 8vw;
  }
}

@media screen and (max-width: 1600px) {
  .home-ceo-message {
    width: 75%;
  }

  .home-ceo-message .text-wrapper {
    width: 50%;
  }

  .main-home .home-ceo-vector-01,
  .main-home .home-ceo-transport {
    width: 21.5%;
  }
}

@media screen and (max-width: 1200px) {
  .home-ceo-message {
    width: 80%;
  }

  .home-ceo-message .text-wrapper {
    width: 60%;
  }

  .main-home .home-ceo-vector-01,
  .main-home .home-ceo-transport {
    width: 15%;
  }
}

@media screen and (max-width: 1024px) {
  .home-ceo-message {
    flex-direction: column-reverse;
    width: 83%;
    padding-top: 50px;
    padding-bottom: 0;
    background-image: none;
  }

  .home-ceo-message .section-title {
    padding-bottom: 30px;
  }

  .home-ceo-message .text-wrapper {
    width: 100%;
    padding-right: 30px;
    padding-top: 35px;
  }

  .home-ceo-message .image-wrapper {
    display: flex;
    flex-direction: row-reverse;
  }

  .home-ceo-message .image-wrapper img {
    width: 75%;
    margin-left: auto;
  }

  .home-ceo-message .image-wrapper .home-vector-chevron {
    width: 89px;
    margin-right: -23vw;
    margin-left: auto;
  }

  .home-ceo-message .btn {
    margin-top: 30px;
  }

  .home-puzzle-bg {
    padding-top: 66px;
    background-size: cover;
    background-position: 0% top;
  }

  .home-puzzle {
    row-gap: 10px;
  }

  .home-puzzle .puzzle-a .cta-wrapper {
    top: 25px;
    left: 25px;
  }

  .home-puzzle .puzzle-b .cta-wrapper {
    left: 33px;
    bottom: 16px;
  }

  .home-puzzle .puzzle-a .cta-wrapper {
    top: 22px;
    left: 17px;
  }

  .home-puzzle .puzzle-d .cta-wrapper {
    top: 23px;
    left: 33px;
  }

  .home-puzzle .cta-wrapper .btn {
    margin-top: 15px;
  }

  .main-home .home-ceo-vector-01, .main-home .home-ceo-transport {
    width: 26%;
  }

  .main-home .home-ceo-vector-01 {
    top: 27vh;
  }
}

@media screen and (max-width: 767px) {
  .home-ceo-message {
    width: 100%;
    padding-top: 80px;
  }

  .home-ceo-message .image-wrapper img {
    width: 100%;
  }

  .home-ceo-message .image-wrapper .home-vector-chevron {
    display: none;
  }

  .home-ceo-message .text-wrapper {
    padding-left: 30px;
  }

  .home-ceo-message .btn-group {
    display: flex;
    justify-content: center;
  }

  .home-puzzle-bg {
    background-image: url('../images/home/puzzle-bg_mobile.png');
    background-size: 100%;
    background-position: -4% top;
  }

  .home-puzzle {
    flex-direction: column;
  }

  .home-puzzle > div {
    width: 100%;
  }

  .home-puzzle > div:nth-child(even) {
    margin-left: unset;
  }

  .home-puzzle .puzzle-a .cta-wrapper {
    top: 14px;
    left: 13vw;
    width: auto;
  }

  .home-puzzle .puzzle-a .cta-wrapper > img {
    width: 53%;
  }

  .home-puzzle .puzzle-b .cta-wrapper {
    left: 13vw;
    width: auto;
  }

  .home-puzzle .puzzle-b .cta-wrapper > img {
    width: 45%;
  }

  .home-puzzle .puzzle-c .cta-wrapper {
    top: 21px;
    left: 13vw;
    width: auto;
  }

  .home-puzzle .puzzle-c .cta-wrapper > img {
    width: 60%;
  }

  .home-puzzle .puzzle-d .cta-wrapper {
    left: 8vw;
    width: auto;
  }

  .home-puzzle .puzzle-d .cta-wrapper > img {
    width: 45.5%;
  }

  .main-home .home-ceo-transport {
    display: none;
  }

  .main-home .home-ceo-vector-01 {
    display: none;
  }

  .home-gap-mobile {
    display: block;
    height: clamp(150px, 43vw, 300px);
    width: 100%;
    position: relative;
    z-index: -1;
    margin-top: -50px;
  }

  .home-gap-mobile .home-gap-mobile-transport {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: auto;
    object-fit: contain;
  }

  .home-gap-mobile .home-gap-mobile-vector-01 {
    position: absolute;
    left: 0;
    top: 7%;
    width: 25%;
    height: auto;
    object-fit: contain;
  }

  .home-gap-mobile .home-gap-mobile-vector-chevron {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 16%;
    height: auto;
    object-fit: contain;
  }
}
/* ==================================== */
/* ========== END of Index ============ */
/* ==================================== */

/* ========== CEO Message ============ */
.ceo-message-intro {
  position: relative;
  margin-top: 90px;
  margin-bottom: 105px;
}
.ceo-message-intro img {
  width: 51vw;
  height: auto;
  display: block;
}

.ceo-message-intro .container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.ceo-message-intro .text-wrapper {
  width: 52.5%;
  margin-left: auto;
}

.ceo-message-intro .section-title {
  margin-bottom: 30px;
}

.main-ceo-message .max-width-1098 h3 {
  margin-bottom: 10px;
}

.main-ceo-message .max-width-1098 {
  padding-block: var(--trapezoid-padding-vertical);
}

.main-ceo-message .signature {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}

.main-ceo-message .signature img {
  width: 300px;
  height: auto;
}

.main-ceo-message .signature .signature-divider {
  width: 322px;
  height: .5px;
  background-color: var(--color-orange-600);
  margin-top: 25px;
  margin-bottom: 25px;
}

.main-ceo-message .signature h6 {
  margin-bottom: 7px;
}



#ceo-message-chevron-01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 22.3%;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-02 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20%;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-03 {
  position: absolute;
  right: 186px;
  top: 50%;
  transform: translateY(-50%);
  width: 69px;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-04 {
  position: absolute;
  right: 272px;
  top: -77px;
  width: 108px;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-05 {
  position: absolute;
  left: 0;
  top: 0;
  width: 18.75%;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-06 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20.8%;
  height: auto;
  object-fit: contain;
  z-index: -1;
}

#ceo-message-chevron-07 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24.5%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1);
  z-index: -1;
  display: none;
}

#ceo-message-chevron-08 {
  display: none;
}

@media screen and (min-width: 1025px) {
  .trapezoid#trapezoid-signature {
    left: -5vw;
  }
  .trapezoid#trapezoid-signature::before {
    clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%);
  }

  .trapezoid#trapezoid-signature::after {
    clip-path: polygon(0 0, 98.9% 0, 72.9% 100%, 0% 100%);
  }
}

@media screen and (max-width: 2200px) {
  .ceo-message-intro {
    margin-top: 80px;
  }

  .ceo-message-intro .section-title {
    margin-bottom: 20px;
  }

  .ceo-message-intro img {
    width: 52vw;
  }

  .main-ceo-message .max-width-1098 {
    max-width: 42vw;
  }

  #ceo-message-chevron-03 {
    width: 3vw;
    right: 7vw;
    top: 40%;
  }

  #ceo-message-chevron-04 {
    right: 10vw;
    width: 4vw;
    top: -4vw;
  }

  .main-ceo-message .signature {
    margin-top: 40px;
  }

  .main-ceo-message .signature img {
    width: 12vw;
  }

  .main-ceo-message .signature .signature-divider {
    width: 13vw;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .main-ceo-message .signature h6 {
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 1400px) {
  .main-ceo-message .max-width-1098 {
    max-width: 50vw;
  }

  .ceo-message-intro img {
    width: 43vw;
    height: 24vw;
    object-fit: cover;
    object-position: right;
  }

  .ceo-message-intro .text-wrapper {
    width: 55.5%;
  }
}

@media screen and (max-width: 1024px) {
  .ceo-message-intro {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .ceo-message-intro img {
    width: 54.9vw;
    position: absolute;
    left: 0;
    top: 0;
  }

  .ceo-message-intro .container {
    position: unset;
  }

  .ceo-message-intro .text-wrapper {
    width: 50%;
    padding-top: 40px;
  }

  .main-ceo-message .max-width-1098 {
    max-width: 67.5vw;
  }

  .main-ceo-message .max-width-1098 .ml--30 {
    margin-left: -10px;
  }

  #ceo-message-chevron-01 {
    left: unset;
    right: 0;
    top: unset;
    bottom: 0;
    transform: rotate(180deg);
    width: 27.4%;
  }

  #ceo-message-chevron-02 {
    display: none;
  }

  #ceo-message-chevron-07 {
    display: block;
  }

  #ceo-message-chevron-03 {
    display: none;
  }
  
  #ceo-message-chevron-04 {
    width: 8vw;
    right: 3vw;
    top: 80px;
  }

  #ceo-message-chevron-05 {
    left: unset;
    right: 0;
    top: unset;
    bottom: 0;
    transform: rotate(180deg);
    width: 27%;
  }

  #ceo-message-chevron-06 {
    display: none;
  }

  #trapezoid-signature {
    left: -24vw;
  }

  .main-ceo-message .signature img {
    width: 20vw;
  }

  .main-ceo-message .signature .signature-divider {
    margin-top: 25px;
    margin-bottom: 25px;
    width: 35vw;
  }

  .main-ceo-message .signature {
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .ceo-message-intro {
    margin-top: 80px;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
  }

  .ceo-message-intro img {
    width: 100%;
    height: auto;
    position: unset;
  }

  .ceo-message-intro .text-wrapper {
    width: 100%;
    padding-top: 50px;
    padding-left: 30px;
  }

  .ceo-message-intro .section-title {
    margin-bottom: 30px;
  }

  .main-ceo-message .max-width-1098 {
    max-width: 100%;
    padding-inline: 40px;
  }

  .main-ceo-message .trapezoid + .max-width-1098 {
    padding: var(--trapezoid-padding-vertical) 40px var(--trapezoid-padding-extend);
  }

  .main-ceo-message .trapezoid.horizontal-flip + .max-width-1098 {
    padding: var(--trapezoid-padding-extend) 40px var(--trapezoid-padding-vertical);
  }

  .main-ceo-message .max-width-1098 .ml--30 {
    margin-left: 0;
  }

  #ceo-message-chevron-01 {
    transform: rotate(0deg);
    left: 0;
    right: unset;
    top: -40vw;
    bottom: unset;
    width: 43.4%;
    z-index: -2;
  }

  #ceo-message-chevron-07 {
    transform: scaleX(1);
    left: unset;
    right: 0;
    bottom: 22vw;
    width: 43.4%;
  }

  #ceo-message-chevron-04 {
    top: unset;
    bottom: -6vw;
    right: 13vw;
    width: 10vw;
  }

  #ceo-message-chevron-05 {
    display: none;
  }

  #trapezoid-signature {
    left: 0;
  }

  .main-ceo-message .trapezoid#trapezoid-signature.horizontal-flip + .max-width-1098 {
    padding-top: var(--trapezoid-padding-extend);
  }

  .main-ceo-message .signature img {
    width: 40vw; 
  }

  .main-ceo-message .signature .signature-divider {
    width: 55vw;
  }

  #ceo-message-chevron-08 {
    display: block;
    position: absolute;
    bottom: -8vw;
    right: 13vw;
    width: 10vw;
    z-index: -2;
  }
}

/* ==================================== */
/* ========== END of CEO Message ============ */
/* ==================================== */

/* ========== Sustainability Management Approach ============ */
.main-sustainability-management-approach #vector-chevron-01 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.main-sustainability-management-approach #vector-chevron-02 {
  position: absolute;
  right: 0;
  top: 60px;
  width: 22%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.main-sustainability-management-approach #vector-chevron-03 {
  position: absolute;
  right: 168px;
  bottom: 160px;
  width: 6.4%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.main-sustainability-management-approach .section-intro {
  margin-top: 100px;
  margin-bottom: 150px;
  position: relative;
}

.main-sustainability-management-approach .section-intro .text-wrapper {
  max-width: 1500px;
  margin: 0 auto;
}

.main-sustainability-management-approach .section-intro .text-wrapper .section-title {
  margin-bottom: 30px;
}


.sdgs-wrapper {
  max-width: 1260px;
  margin: 0 auto;
}

.sdgs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 120px;
  margin-top: 100px;
  margin-left: 90px;
}

.sdgs-row .sdgs-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
}



.sdgs-row .sdgs-item .row {
  margin: 0;
  width: 95%;
}

.sdgs-row .sdgs-item .row > div {
  padding: 0;
}

.sdgs-row .sdgs-item .row img {
  display: block;
}

@media screen and (min-width: 1025px) {
  .sdgs-row .sdgs-item:nth-child(4) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .sdgs-row .sdgs-item:nth-child(5) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
  }
}

@media screen and (max-width: 2200px) {
  .main-sustainability-management-approach #vector-chevron-01 {
    width: 27%;
  }

  .main-sustainability-management-approach #vector-chevron-03 {
    right: 6vw;
    bottom: 5vw;
  }

  .main-sustainability-management-approach .section-intro {
    margin-top: 70px;
    margin-bottom: 100px;
  }

  .main-sustainability-management-approach .section-intro .text-wrapper {
    max-width: 1100px;
  }

  .main-sustainability-management-approach .section-intro .text-wrapper .section-title {
    margin-bottom: 20px;
  }

  .sdgs-wrapper {
    max-width: 1000px;
  }

  .sdgs-row {
    margin-top: 75px;
    gap: 70px 70px;
  }

  .sdgs-row .sdgs-item {
    gap: 30px;
  }

  .sdgs-row .sdgs-item .row {
    width: 85%;
  }
}

@media screen and (max-width: 1600px) {
  .main-sustainability-management-approach #vector-chevron-01 {
    width: 22%;
    bottom: 13vw;
  }
}

@media screen and (max-width: 1300px) {
  .main-sustainability-management-approach #vector-chevron-01 {
    bottom: 23vw;
  }

  .main-sustainability-management-approach #vector-chevron-03 {
    right: 2vw;
    bottom: 10vw;
  }
}

@media screen and (max-width: 1024px) {
  .main-sustainability-management-approach #vector-chevron-01 {
    bottom: 0;
    width: 17%;
  }

  .main-sustainability-management-approach .section-intro {
    margin-top: 50px;
    margin-bottom: 80px;
  }
  
  .main-sustainability-management-approach .section-intro .text-wrapper {
    padding-left: 30px;
  }


  .sdgs-row {
    gap: 40px 40px;
    margin-left: 70px;
    margin-top: 55px;
  }

  .sdgs-row .sdgs-item {
    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .sdgs-row {
    margin-left: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .main-sustainability-management-approach #vector-chevron-01 {
    display: none;
  }

  .main-sustainability-management-approach #vector-chevron-03 {
    width: 10vw;
    right: 5vw;
  }

  .sdgs-row .sdgs-item {
    gap: 16px;
  }
}

@media screen and (max-width: 500px) {
  .sdgs-row {
    margin-left: 0;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px 30px;
  }


  .sdgs-row .sdgs-item .row {
    width: 70%;
  }

  .main-sustainability-management-approach #vector-chevron-03 {
    width: 15vw;
    right: 5vw;
    bottom: 25vw;
  }
}

/* ==================================== */
/* ========== END of Sustainability Management Approach ============ */
/* ==================================== */

/* ========= 20 Years of Excellence =========== */
.main-20-years-of-excellence .tab-layout {
  display: flex;
  flex-direction: row;
  gap: 55px;
  margin-right: -70px;
}

.main-20-years-of-excellence .tab-layout .tab-sidebar {
  width: 31.6%;
}

.main-20-years-of-excellence .tab-layout .tab-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
  background-color: #0000000b;
}

.main-20-years-of-excellence .tab-layout .tab-items button {
  width: 27%;
  background: var(--color-white);
  appearance: none;
  border: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 30px;
  box-shadow: 0px -5px 10px 0px #0000001A;
}

.main-20-years-of-excellence .tab-layout .tab-items button:hover {
  opacity: 0.8;
}

.main-20-years-of-excellence .tab-layout .tab-items button:first-child {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  margin-right: -1.5%;
  margin-left: 0;
}

.main-20-years-of-excellence .tab-layout .tab-items button:nth-child(2),
.main-20-years-of-excellence .tab-layout .tab-items button:nth-child(3) {
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
  margin-left: -1.5%;
  margin-right: -1.5%;
}

.main-20-years-of-excellence .tab-layout .tab-items button:last-child {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
  margin-left: -1.5%;
  margin-right: 0;
}

.main-20-years-of-excellence .tab-layout .tab-items button.active {
  background-color: var(--color-green-200);
}

.main-20-years-of-excellence .tab-layout .tab-items button img {
  width: 74px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.main-20-years-of-excellence .tab-layout .tab-content {
  flex: 1;
  padding: 34px;
  background-color: var(--color-green-200);
  box-shadow: 0px 12px 15px 0px #0000001A;
}

.main-20-years-of-excellence .tab-layout .tab-content-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  height: 100%;
}

.main-20-years-of-excellence .tab-layout ol {
  padding-left: 0;
  margin: 0;
  list-style: none;
  counter-reset: my-counter;
}

.main-20-years-of-excellence .tab-layout ol li:not(:last-child) {
  margin-bottom: 11px;
}

.main-20-years-of-excellence .tab-layout ol li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ".";
  width: 17px;
  display: inline-block;
  margin-right: 10px;
}

.main-20-years-of-excellence .tab-layout .dot {
  display: inline-block;
  width: 10.8px;
  height: 10.8px;
  background-color: #9C772B;
  border-radius: 50%;
  margin-left: 5px;
}

.main-20-years-of-excellence .tab-layout .triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #9C772B;
  margin-left: 5px;
}

.main-20-years-of-excellence .tab-layout ol li > span:first-child {
  margin-left: 15px;
}

.main-20-years-of-excellence .tab-layout .map-content {
  flex: 1;
} 

.main-20-years-of-excellence .tab-layout .tab-remark {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 30px;
}

.main-20-years-of-excellence .tab-layout .tab-remark-item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  line-height: 32px;
}

.main-20-years-of-excellence .tab-layout .tab-sidebar > .tab-remark {
  display: none;
}

.section-20-years-of-excellence {
  margin-top: 90px;
  padding-bottom: 180px;
}

.section-20-years-of-excellence .text-intro {
  margin-bottom: 100px;
}

.text-intro p,
.text-intro h3 {
  padding-left: 50px;
}

.text-intro ul {
  margin-left: 50px;
}

.text-intro h2.section-title {
  margin-bottom: 30px;
}

.section-gala-dinner {
  padding-top: 115px;
  padding-bottom: 150px;
  background-image: url('../images/20-years-of-excellence/gala-dinner-bg_desktop.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.section-gala-dinner .text-content {
  max-width: 830px;
}

.section-gala-dinner .column-3 {
  max-width: 1270px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 80px 80px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.section-gala-dinner .column-3 .column-item {
  width: calc(100% / 3 - (160px / 3));
}

.section-gala-dinner .column-3 .column-item img {
  display: block;
}

#gala-dinner-vector {
  position: absolute;
  top: -86px;
  right: 0;
  width: 52.7%;
  height: auto;
  object-fit: contain;
  display: block;
}

#excellence-vector-chevron-01 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25.6%;
  height: auto;
  display: block;
  z-index: -1;
}

#excellence-vector-chevron-02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 23.3%;
  height: auto;
  display: block;
  z-index: -1;
}

.main-20-years-of-excellence .tab-layout .tab-mobile {
  display: none;
}

@media screen and (max-width: 2200px) {
  .text-intro p,
  .text-intro h3 {
    padding-left: 40px;
  }

  .text-intro ul {
    margin-left: 40px;
  }

  .section-20-years-of-excellence {
    margin-top: 70px;
    padding-bottom: 150px;
  }

  .section-20-years-of-excellence .text-intro {
    margin-bottom: 70px;
  }

  .text-intro h2.section-title {
    margin-bottom: 20px;
  }

  .main-20-years-of-excellence .tab-layout .tab-items button {
    padding: 15px 25px;
  }

  .main-20-years-of-excellence .tab-layout .tab-content {
    padding: 25px;
  }

  .main-20-years-of-excellence .tab-layout .tab-content-inner {
    gap: 20px;
  }

  .main-20-years-of-excellence .tab-layout .tab-content-inner ol li:not(:last-child) {
    margin-bottom: 8px;
  }

  .main-20-years-of-excellence .tab-layout .dot {
    width: 8px;
    height: 8px;
  }

  .main-20-years-of-excellence .tab-layout .triangle {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #9C772B;
  }

  .main-20-years-of-excellence .tab-layout .tab-content-inner ol li > span:first-child {
    margin-left: 10px;
  }

  .main-20-years-of-excellence .tab-layout .tab-remark {
    gap: 30px;
    margin-top: 20px;
  }

  .main-20-years-of-excellence .tab-layout .tab-remark-item {
    font-size: 12px;
    line-height: 22px;
  }

  .section-gala-dinner {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .section-gala-dinner .text-content {
    width: 55%;
  }

  #gala-dinner-vector {
    top: -60px;
  }

  .section-gala-dinner .column-3 {
    max-width: 1000px;
    justify-content: center;
    gap: 70px 60px;
    margin-top: 60px;
  }

  .section-gala-dinner .column-3 .column-item {
    width: calc(100% / 3 - (120px / 3));
  }
}

@media screen and (max-width: 1024px) {
  .section-20-years-of-excellence .text-intro {
    margin-bottom: 50px;
  }

  .text-intro p,
  .text-intro h3 {
    padding-left: 20px;
  }

  .text-intro ul {
    margin-left: 20px;
  }

  .section-20-years-of-excellence {
    margin-top: 70px;
    padding-bottom: 100px;
  }

  .main-20-years-of-excellence .tab-layout {
    gap: 21px;
    margin-right: unset;
  }

  .main-20-years-of-excellence .tab-layout .tab-sidebar {
    width: 41%;
  }

  .main-20-years-of-excellence .tab-layout .tab-items button {
    padding: 15px 24px;
  }

  .main-20-years-of-excellence .tab-layout .tab-content-inner {
    gap: 30px;
  }

  .main-20-years-of-excellence .tab-layout .tab-remark {
    margin-top: 45px;
    gap: 15px;
  }

  #excellence-vector-chevron-01,
  #excellence-vector-chevron-02 {
    display: none;
  }

  #gala-dinner-vector {
    width: 55%;
    top: -52px;
  }

  .section-gala-dinner {
    padding-top: 70px;
    padding-bottom: 90px;
  }

  .section-gala-dinner .text-content {
    width: 100%;
  }

  .section-gala-dinner .text-content > p:first-of-type {
    max-width: 60%;
  }

  .section-gala-dinner .column-3 {
    max-width: 100%;
    margin-top: 50px;
    gap: 50px 50px;
  }

  .section-gala-dinner .column-3 .column-item {
    width: calc(100% / 3 - (100px / 3));

  }
}

@media screen and (max-width: 768px) {
  .section-20-years-of-excellence .text-intro {
    margin-bottom: 40px;
  }

  .main-20-years-of-excellence .tab-layout {
    flex-direction: column-reverse;
    gap: 80px;
  }

  .main-20-years-of-excellence .tab-layout .tab-sidebar {
    width: 100%;
  }

  #gala-dinner-vector {
    width: 100%;
    position: unset;
    margin-top: -70px;
  }

  .section-gala-dinner {
    padding-top: 1px;
    padding-bottom: 120px;
  }

  .section-gala-dinner .text-content {
    margin-top: 20px;
  }

  .section-gala-dinner .text-content > p:first-of-type {
    max-width: unset;
  }

  .section-gala-dinner .column-3 {
    margin-top: 40px;
    gap: 50px 0;
  }

  .section-gala-dinner .column-3 .column-item {
    width: 50%;
  }

  .main-20-years-of-excellence .tab-layout .tab-items {
    display: none;
  }

  .main-20-years-of-excellence .tab-layout .tab-content {
    display: none;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item {
    border-radius: 5px;
    border: 2px solid #CEE7D6;
    background: linear-gradient(145deg, #FEFFFF 50%, #F5FBFA 50%);
    padding: 20px 30px 16px;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item.active {
    background: var(--color-green-200);
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item-header {
    font-size: 26px;
    line-height: 46px;
    color: var(--color-navy);
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    position: relative;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item:not(.active) .tab-mobile-item-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 15px;
    height: 30px;
    background-image: url('../images/submenu-active.png');
    background-repeat: no-repeat;
    background-size: contain;

  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item-header img {
    width: 72px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item-content {
    margin-top: 5px;
  }

  

  .main-20-years-of-excellence .tab-layout .back-btn {
    margin-left: auto;
    margin-top: 70px;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-blue);
    font-size: 16px;
    line-height: 32px;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
    display: flex;
  }
}

@media screen and (max-width: 500px) {
  .main-20-years-of-excellence .tab-layout .tab-mobile {
    gap: 5px;
  }
  
  .main-20-years-of-excellence .tab-layout .tab-mobile-item {
    padding: 10px 20px 12px;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item-header {
    font-size: 18px;
    line-height: 28px;
  }

  .main-20-years-of-excellence .tab-layout .tab-mobile-item-header img {
    width: 50px;
  }

  .main-20-years-of-excellence .tab-layout .back-btn {
    margin-top: 50px;
  }

  .main-20-years-of-excellence .tab-layout .tab-sidebar > .tab-remark {
    display: flex;
  }
}

/* ==================================== */
/* ========== END of 20 Years of Excellence ============ */
/* ==================================== */

/* ========= Our Green or Value Added Products =========== */
.main-our-green-or-value-added-products .text-intro,
.main-key-achievement .text-intro {
  margin-top: 100px;
  margin-bottom: 20px;
}

.main-our-green-or-value-added-products .fixed-width-image {
  width: fit-content;
  height: fit-content;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -100px;
}
.main-our-green-or-value-added-products .fixed-width-image img {
  width: 1858px;
  min-width: 1858px;
  aspect-ratio: 1858 / 1377;
}

.main-our-green-or-value-added-products .fixed-width-image .pointer {
  position: absolute;
  inset: 0;
}

@keyframes float {
  0% { 
    transform: translateY(0) translateX(-50%); 
  } 50% { 
    transform: translateY(-16px) translateX(-50%); 
  } 100% { 
    transform: translateY(0) translateX(-50%); 
  }
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect {
  position: absolute;
  width: 40px;
  aspect-ratio: 2 / 1;
  padding: 20px;
  background-image: url('../images/our-green-or-value-added-products/chevron-down.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  z-index: 2;
  transform: translate(-50%, -50%);
  animation: float 3s ease-in-out infinite;
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect h5 {
  width: fit-content;
  min-width: 150px;
  text-align: center;
  padding: 3px 5px;
  border-radius: 5px;
  position: absolute;
  top: -3rem;
  transform: translateX(-45%);
  line-height: 1.3;
  color: var(--color-navy);
  border: 1px solid #CEE7D6;
  background: linear-gradient(145deg, #FEFFFF 50%, #F5FBFA 50%);
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect#pointer-rect-1 h5 {
  top: -4.5rem;
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect#pointer-rect-6 h5 {
  rotate: 90deg;
  transform: translateY(100%);
  top: -4rem;
}

@media screen and (max-width: 1024px) {
  .main-our-green-or-value-added-products .fixed-width-image .pointer-rect h5 {
    display: none !important;
  }
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect.active {
  background-image: url('../images/our-green-or-value-added-products/chevron-down_active.svg');
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-rect:hover {
  scale: 1.2;
  opacity: 0.8;
}

#pointer-rect-1 {
  top: 17%;
  right: 34.2%;
}

#pointer-rect-2 {
  top: 23%;
  left: 50%;
}

#pointer-rect-3 {
  top: 31%;
  right: 24%;
}

#pointer-rect-4 {
  top: 35%;
  left: 23%;
}

#pointer-rect-5 {
  left: 54%;
  bottom: 37%;
}

#pointer-rect-6 {
  left: 16%;
  bottom: 30%;
  rotate: -90deg;
}

#pointer-rect-7 {
  left: 21%;
  bottom: 34%;
}

#pointer-rect-8 {
  left: 30%;
  bottom: 30%;
}

#pointer-rect-9 {
  right: 22%;
  bottom: 29%;
}

.main-our-green-or-value-added-products .fixed-width-image .pointer-popup {
  position: absolute;
  padding: 27px 60px 54px 45px;
  background-image: url('../images/our-green-or-value-added-products/modal-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 3;
  width: 500px;
  transform: translate(-50%, -50%);
}

#green-vector-chevron-01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 33.1%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#green-vector-chevron-02 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 23.6%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

@media screen and (max-width: 2200px) {
  .main-our-green-or-value-added-products .text-intro,
  .main-key-achievement .text-intro {
    margin-top: 80px;
    margin-bottom: 20px;
  }

  .main-our-green-or-value-added-products .fixed-width-image img {
    min-width: 1100px;
    width: 1100px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-rect {
    width: 30px;
    padding: 10px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup {
    padding: 20px 30px 30px 30px;
    width: 400px;
  }
}

@media screen and (max-width: 1200px) {
  .main-our-green-or-value-added-products .fixed-width-image img {
    min-width: 900px;
    width: 900px;
  }
}

@media screen and (max-width: 1024px) {
  .main-our-green-or-value-added-products .fixed-width-image img {
    min-width: 800px;
    width: 800px;
  }

  .main-our-green-or-value-added-products .text-intro,
  .main-key-achievement .text-intro {
    margin-bottom: 60px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup {
    width: 300px;
    padding: 20px 20px 30px 20px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup h3 {
    font-size: 21px;
    line-height: 24px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup p {
    font-size: 14px;
    line-height: 18px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-rect {
    width: 25px;
    padding: 10px;
  }

  #green-vector-chevron-01 {
    display: none;
  }

  #green-vector-chevron-02 {
    display: none;
  }
}

@media screen and (max-width: 830px) {
  .main-our-green-or-value-added-products .fixed-width-image img {
    min-width: 600px;
    width: 600px;
  }
}

@media screen and (max-width: 768px) {
  .main-our-green-or-value-added-products .text-intro {
    margin-bottom: 150px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-rect {
    width: 17px;
    padding: 6px;
  }

  .main-our-green-or-value-added-products .fixed-width-image img {
    width: 100%;
    min-width: unset;
  }

  .main-our-green-or-value-added-products .fixed-width-image {
    margin-bottom: -100px;
  }

  #green-vector-chevron-02 {
    display: block;
    width: 45%;
    
  }
}

@media screen and (max-width: 500px) {
  .main-our-green-or-value-added-products .text-intro,
  .main-key-achievement .text-intro {
    margin-top: 70px;
  }
  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup h3 {
    font-size: 18px;
    line-height: 22px;
  }

  @keyframes float {
    0% { 
      transform: translateY(0) translateX(-50%); 
    } 50% { 
      transform: translateY(-5px) translateX(-50%); 
    } 100% { 
      transform: translateY(0) translateX(-50%); 
    }
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-popup {
    padding: 20px 25px 30px 20px;
  }

  .main-our-green-or-value-added-products .fixed-width-image .pointer-rect {
    width: 13px;
    padding: 5px;
  }
}

/* ==================================== */
/* ========== END of Our Green or Value Added Products ============ */
/* ==================================== */

/* ========= Key Achievement =========== */
.main-key-achievement {
  position: relative;
}

#key-achievement-row-01 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px;
}

.key-achievement-row-01-vector {
  width: 100%;
}

.key-achievement-row-01-vector img {
  width: 959px;
  height: auto;
  margin-left: 50px;
  display: block;
}

.key-achievement-item-1 {
  position: relative;
  width: 62%;
}

.key-achievement-item-2 {
  position: relative;
  flex: 1;
}

.key-achievement-item-1 .text-content {
  padding-top: 85px;
  padding-bottom: 80px;
  margin-right: 300px;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 40px;
  max-width: 670.7px;
}

.key-achievement-item-2 .text-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.key-achievement-no {
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
}

#key-achievement-wrapper-01 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-right: 60px;
}

#key-achievement-wrapper-02 {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: flex-end;
  margin-right: 90px;
}

@media screen and (min-width: 2201px) {
  #key-achievement-wrapper-02:lang(zh) {
    margin-right: 50px;
  }
}

#key-achievement-wrapper-03 {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: flex-end;
}

#key-achievement-wrapper-04 {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
  margin-right: 40px;
}

#key-achievement-wrapper-05 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-end;
}

#key-achievement-wrapper-05 .counter {
  margin-right: 9px;
}

#key-achievement-wrapper-06 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-left: -13%;
}

#key-achievement-wrapper-07 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 160px;
}

#key-achievement-wrapper-06 .row-wrapper,
#key-achievement-wrapper-07 .row-wrapper {
  display: flex;
  flex-direction: row;
}

#key-achievement-wrapper-06 .row-wrapper{
  gap: 23px;
  align-items: flex-start;
}

#key-achievement-wrapper-06 .row-wrapper > svg {
  width: 72px;
}

#key-achievement-wrapper-06 .row-wrapper > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#key-achievement-wrapper-06 .row-wrapper h4 {
  max-width: 330px;
}

#key-achievement-wrapper-06 .row-wrapper .row-counter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
}

#key-achievement-wrapper-07 .row-wrapper {
  gap: 20px;
  align-items: flex-start;
}

#key-achievement-wrapper-07 .row-wrapper > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#key-achievement-wrapper-07 .row-wrapper h4 {
  max-width: 260px;
}

#key-achievement-wrapper-07 .row-wrapper .row-counter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 5px;
}

#key-achievement-wrapper-07 .row-wrapper > svg {
  width: 52px;
  max-height: 50px;
}

#key-achievement-row-02 {
  margin-top: 50px;
  width: 100%;
}

#key-achievement-row-02 .trapezoid::before {
  clip-path: polygon(0 0, 97% 0, 80% 100%, 0% 100%);
}

#key-achievement-row-02 .trapezoid::after {
  clip-path: polygon(0 0, 95.9% 0, 78.9% 100%, 0% 100%);
}


.key-achievement-item-3 {
  position: relative;
  width: 100%;
}

#key-achievement-row-02 .row-content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 80px;
  padding-bottom: 110px;
  align-items: flex-start;
  max-width: 1304px;
  margin-left: 30%;
  margin-right: auto;
}

#key-achievement-row-02 .row-content .row-content-item-1 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;
}

#key-achievement-row-02 .row-content .row-content-item-2 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;
  margin-left: 20px;
}

#key-achievement-wrapper-08 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  margin-right: 70px;
}

#key-achievement-wrapper-08 h4 {
  max-width: 250px;
}

#key-achievement-wrapper-09, #key-achievement-wrapper-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 8px;
}

#key-achievement-wrapper-09 {
  margin-right: 40px;
}

#key-achievement-wrapper-09 > div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
}

#key-achievement-wrapper-10 > div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

#key-achievement-wrapper-11 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  margin-right: 75px;
}

#key-achievement-wrapper-11 h4 {
  max-width: 280px;
}

#key-achievement-wrapper-12, #key-achievement-wrapper-13 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

#key-achievement-wrapper-12 {
  margin-right: 140px;
}

#key-achievement-wrapper-12 h5,
#key-achievement-wrapper-13 h5 {
  white-space: nowrap;
}

#key-achievement-wrapper-12 > div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
}

#key-achievement-wrapper-13 > div {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

#key-achievement-row-03 .row-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px 50px;
  justify-content: flex-start;
  max-width: 1400px;
  margin-left: 31%;
  margin-right: auto;
  padding-top: 150px;
  padding-bottom: 70px;
}

#key-achievement-row-03 .row-wrapper > div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  width: calc(100% / 3 - (200px / 3));
}

#key-achievement-vector-01 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 39.6%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#key-achievement-row-04 {
  max-width: 900px;
  margin-left: 41%;
  margin-right: auto;
  padding-bottom: 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#key-achievement-row-04 .row-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

#key-achievement-vector-02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22.4%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#key-achievement-vector-03 {
  position: absolute;
  bottom: 22vw;
  right: 6vw;
  width: 9%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#key-achievement-vector-04 {
  display: none;
}

@media screen and (max-width: 2200px) {
  .key-achievement-row-01-vector img {
    width: 36.5%;
    margin-left: 40px;
  }

  .key-achievement-item-1 .text-content {
    padding-top: 65px;
    padding-bottom: 65px;
    margin-right: 4vw;
    row-gap: 30px;
  }

  #key-achievement-wrapper-01 {
    gap: 16px;
    margin-right: 40px;
  }

  #key-achievement-wrapper-01 svg {
    width: 46px;
  }

  #key-achievement-wrapper-02 {
    margin-right: 60px;
  }

  .key-achievement-no {
    font-size: 54px;
  }

  #key-achievement-wrapper-04 {
    gap: 14px;
  }

  #key-achievement-wrapper-04 svg {
    width: 54px;
  }

  #key-achievement-wrapper-05 {
    gap: 6px;
  }

  #key-achievement-wrapper-05 svg {
    width: 22px;
  }

  #key-achievement-wrapper-06 .row-wrapper {
    gap: 18px;
  }

  #key-achievement-wrapper-06 .row-wrapper > svg {
    width: 54px;
    margin-top: -10px;
  }

  #key-achievement-wrapper-07 {
    margin-left: 5vw;
  }

  #key-achievement-wrapper-07 .row-wrapper {
    gap: 16px;
  }

  #key-achievement-wrapper-07 .row-wrapper > svg {
    width: 42px;
    margin-top: -10px;
  }

  #key-achievement-wrapper-07 .row-wrapper h4 {
    max-width: 235px;
  }

  #key-achievement-row-02 {
    margin-top: 40px;
  }

  #key-achievement-row-02 .row-content {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  #key-achievement-wrapper-08 svg {
    width: 36px;
  }

  #key-achievement-wrapper-08 h4 {
    max-width: 165px;
  }

  #key-achievement-wrapper-09, #key-achievement-wrapper-10 {
    gap: 10px;
    padding-top: 15px;
  }

  #key-achievement-row-02 .row-content {
    gap: 35px;
  }

  #key-achievement-wrapper-11 {
    align-items: center;
  }

  #key-achievement-wrapper-11 svg {
    width: 26px;
  }

  #key-achievement-wrapper-11 h4 {
    max-width: 200px;
  }

  #key-achievement-wrapper-12 {
    margin-right: 90px;
  }

  #key-achievement-wrapper-12, #key-achievement-wrapper-13 {
    padding-top: 15px;
  }

  #key-achievement-row-03 .row-wrapper {
    padding-top: 100px;
    padding-bottom: 50px;
    gap: 30px 30px;
    max-width: 940px;
  }

  #key-achievement-row-03 .row-wrapper > div {
    width: calc(100% / 3 - (60px / 3));
    gap: 12px;
  }

  #key-achievement-wrapper-14 svg {
    width: 60px;
  }

  #key-achievement-wrapper-15 svg {
    width: 40px;
  }

  #key-achievement-wrapper-16 svg {
    width: 54px;
  }

  #key-achievement-wrapper-17 svg {
    width: 46px;
  }

  #key-achievement-wrapper-18 svg {
    width: 36px;
  }

  #key-achievement-wrapper-19 svg {
    width: 45px;
  }

  #key-achievement-row-04 {
    gap: 16px;
    padding-bottom: 150px;
  }

  #key-achievement-row-04 .row-title {
    gap: 20px;
  }

  #key-achievement-row-04 svg {
    width: 38px;
  }
}

@media screen and (max-width: 1500px) {
  #key-achievement-row-02 .row-content {
    max-width: 900px;
  }

  #key-achievement-row-02 .row-content .row-content-item-1 {
    gap: 20px;
  }

  #key-achievement-row-02 .row-content .row-content-item-2 {
    gap: 20px;
  }

  #key-achievement-wrapper-08 {
    margin-right: 40px;
  }

  #key-achievement-wrapper-09 {
    margin-right: 30px;
  }

  #key-achievement-wrapper-11 {
    margin-right: 45px;
  }

  #key-achievement-wrapper-12 {
    margin-right: 60px;
  }
}

@media screen and (max-width: 1400px) {
  .key-achievement-item-1 .text-content {
    max-width: 75%;
  }
  #key-achievement-row-02 .row-content {
    margin-left: 23%;
  }

  #key-achievement-row-03 .row-wrapper {
    margin-left: 23%;
  }
}

@media screen and (max-width: 1200px) {
  #key-achievement-row-02 .trapezoid  {
    width: 100%;
  }

  #key-achievement-row-02 .row-content {
    margin-left: auto;
    max-width: 800px;
  }

  #key-achievement-row-03 .row-wrapper {
    margin-left: auto;
  }

  .key-achievement-item-1 {
    width: 70%;
  }

  .key-achievement-item-1 .text-content {
    max-width: 80%;
  }
}

@media screen and (max-width: 1024px) {
  #key-achievement-row-01 {
    flex-direction: column;
  }

  .key-achievement-item-1 {
    width: 90%;
    margin-right: auto;
  }

  .key-achievement-item-2 {
    width: 90%;
    margin-left: auto;
    margin-right: 50px;
    padding-top: 95px;
    padding-bottom: 40px;
  }

  .key-achievement-item-2 .text-content {
    flex-direction: row;
    justify-content: flex-end;
    gap: 50px;
  }

  #key-achievement-wrapper-06 {
    margin-left: unset;
  }

  .key-achievement-row-01-vector img {
    width: 46%;
  }

  .key-achievement-item-1 .text-content {
    row-gap: 15px;
    max-width: 90%;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  #key-achievement-wrapper-01 {
    order: 1;
    margin-right: unset;
    width: 38%;
  }

  #key-achievement-wrapper-04 {
    order: 2;
    margin-right: unset;
    width: 60%;
  }

  #key-achievement-wrapper-02 {
    order: 3;
    margin-left: 60px;
    margin-right: 24px;
  }

  #key-achievement-wrapper-03 {
    order: 4;
    width: 20.5%;
  }

  #key-achievement-wrapper-05 {
    order: 5;
  }

  #key-achievement-wrapper-01 svg {
    width: 41px;
  }

  #key-achievement-wrapper-04 svg {
    width: 48.5px;
  }

  #key-achievement-wrapper-06 {
    width: 260px;
  }

  #key-achievement-wrapper-06 .row-wrapper {
    gap: 20px;
  }

  #key-achievement-wrapper-06 .row-wrapper > svg {
    min-width: 46px;
    width: 46px;
  }

  #key-achievement-wrapper-06 .row-wrapper > div {
    gap: 5px;
  }

  #key-achievement-wrapper-06 .row-wrapper h4 {
    max-width: unset;
  }

  #key-achievement-wrapper-07 {
    margin-left: unset;
  }

  #key-achievement-wrapper-07 .row-wrapper > svg {
    width: 40px;
    margin-top: -6px;
  }

  #key-achievement-row-02 .trapezoid {
    width: 109%;
  }

  #key-achievement-row-02 .row-content {
    max-width: 90%;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 8%;
    gap: 46px;
  }

  #key-achievement-row-02 .row-content .row-content-item-1 {
    flex-wrap: wrap;
  }

  #key-achievement-wrapper-08 {
    margin-right: unset;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  #key-achievement-wrapper-08 svg {
    width: 30px;
  }

  .key-achievement-no {
    font-size: 52px;
  }

  #key-achievement-wrapper-08 h4 {
    max-width: 100%;
  }

  #key-achievement-wrapper-08 h4, #key-achievement-wrapper-11 h4 {
    font-size: 21px;
  }

  #key-achievement-wrapper-11 h4 {
    max-width: 80%;
  }

  #key-achievement-row-02 .row-content .row-content-item-1 {
    gap: 20px 30px;
  }

  #key-achievement-wrapper-09 {
    margin-left: 45px;
  }

  #key-achievement-wrapper-09,
  #key-achievement-wrapper-10 {
    padding-top: unset;
    margin-right: unset;
  }

  #key-achievement-wrapper-09 > div {
    gap: 9px;
  }

  #key-achievement-row-02 .row-content .row-content-item-2 {
    flex-wrap: wrap;
    margin-left: 23%;
    gap: 8px 50px;
    align-items: center;
  }

  #key-achievement-wrapper-11 {
    margin-right: unset;
    width: 100%;
    gap: 20px;
  }

  #key-achievement-wrapper-11 svg {
    width: 21px;
  }

  #key-achievement-wrapper-12 {
    margin-left: 40px;
  }

  #key-achievement-wrapper-12 h5, #key-achievement-wrapper-13 h5 {
    white-space: normal;
  }

  #key-achievement-wrapper-12, #key-achievement-wrapper-13 {
    padding-top: unset;
    margin-right: unset;
    gap: 10px;
  }

  #key-achievement-wrapper-12 > div {
    gap: 9px;
  }

  #key-achievement-wrapper-13 > div {
    gap: 6px;
  }

  #key-achievement-wrapper-13 {
    width: 44%;
    text-align: center;
  }

  #key-achievement-row-02 .trapezoid::before {
    clip-path: polygon(0 0, 97% 0, 64% 100%, 0% 100%);
  }

  #key-achievement-row-02 .trapezoid::after {
    clip-path: polygon(0 0, 95.9% 0, 62.9% 100%, 0% 100%);
  }

  #key-achievement-row-03 .row-wrapper {
    margin-left: 30px;
    margin-right: 30px;
    max-width: unset;
    padding-top: 80px;
    padding-bottom: 77px;
  }

  #key-achievement-row-03 .row-wrapper > div {
    width: fit-content;
    gap: 20px;
  }

  #key-achievement-wrapper-14 svg {
    width: 50px;
  }

  #key-achievement-wrapper-15 svg {
    width: 33px;
  }

  #key-achievement-wrapper-16 svg {
    width: 52px;
  }

  #key-achievement-wrapper-17 {
    margin-left: auto;
  }

  #key-achievement-wrapper-17 svg {
    width: 40px;
  }

  #key-achievement-wrapper-18 svg {
    width: 34px;
  }

  #key-achievement-wrapper-19 svg {
    width: 47px;
  }

  #key-achievement-row-03 .row-wrapper h4 {
    font-size: 21px;
  }

  #key-achievement-row-03 .row-wrapper h5 {
    font-size: 18px;
  }

  #key-achievement-row-04 {
    margin-right: 30px;
    margin-left: auto;
    width: 70%;
    max-width: 678px;
    padding-bottom: 0;
  }

  #key-achievement-row-04 .row-title {
    gap: 7px;
    gap: 30px;
  }

  #key-achievement-row-04 svg {
    width: 29px;
  }

  #key-achievement-vector-01 {
    bottom: 43vw;
    width: 25%;
  }

  #key-achievement-vector-02 {
    right: unset;
    bottom: 2vw;
    left: 0;
  }

  #key-achievement-vector-03 {
    bottom: 35vw;
    right: unset;
    width: 11vw;
    left: 9vw;
  }
}

@media screen and (max-width: 990px) {
  #key-achievement-row-02 .row-content .row-content-item-2 {
    margin-left: 8%;
    gap: 8px 30px;
  }

  #key-achievement-wrapper-17 {
    margin-left: unset;
  }
}

@media screen and (max-width: 800px) {
  #key-achievement-wrapper-13 {
    margin-left: 30%;
  }
}

@media screen and (max-width: 768px) {
  .key-achievement-item-1 {
    width: 100%;
  }

  .key-achievement-item-1 .trapezoid {
    transform: scaleY(-1);
  }

  .key-achievement-item-1 .text-content {
    max-width: unset;
    width: auto;
    margin-left: 45px;
    margin-right: 45px;
    padding-top: 50px;
    padding-bottom: 110px;
  }

  #key-achievement-wrapper-01 {
    align-items: flex-start;
  }

  #key-achievement-wrapper-01 {
    width: 100%;
    gap: 20px;
  }

  #key-achievement-wrapper-02 {
    order: 2;
    margin-right: 40px;
  }

  #key-achievement-wrapper-03 {
    order: 3;
  }

  #key-achievement-wrapper-04 {
    order: 4;
    width: 100%;
    margin-top: 25px;
  }

  #key-achievement-wrapper-05 {
    order: 5;
    margin-left: 60px;
  }

  #key-achievement-wrapper-01 svg,
  #key-achievement-wrapper-04 svg {
    margin-top: -15px;
  }

  .key-achievement-row-01-vector img {
    width: calc(100% - 80px);
    margin-right: 40px;
  }

  .key-achievement-item-2 {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
    padding-top: 50px;
    padding-bottom: 90px;
  }

  .key-achievement-item-2 .text-content {
    flex-direction: column;
    gap: 40px;
  }

  #key-achievement-wrapper-06,
  #key-achievement-wrapper-07 {
    width: auto;
  }

  #key-achievement-wrapper-06 .row-wrapper {
    gap: 16px;
  }

  #key-achievement-wrapper-07 .row-wrapper {
    gap: 16px;
  }

  #key-achievement-wrapper-07 .row-wrapper h4 {
    max-width: unset;
  }

  #key-achievement-wrapper-06 .row-wrapper > svg {
    width: 58px;
    min-width: 58px;
  }

  #key-achievement-wrapper-07 .row-wrapper > svg {
    width: 58px;
    min-width: 58px;
  }

  #key-achievement-row-02 .row-content {
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    padding: 50px 20px 170px 20px;
  }

  #key-achievement-wrapper-09 {
    margin-left: unset;
  }

  #key-achievement-wrapper-09, #key-achievement-wrapper-10 {
    align-items: flex-start;
  }

  #key-achievement-row-02 .row-content .row-content-item-2 {
    margin-left: unset;
    gap: 20px;
  }

  #key-achievement-wrapper-12, #key-achievement-wrapper-13 {
    margin-left: unset;
    align-items: flex-start;
    width: auto;
    text-align: left;
  }

  #key-achievement-wrapper-08 {
    margin-bottom: -20px;
  }

  #key-achievement-wrapper-08 svg,#key-achievement-wrapper-11 svg  {
    width: 6.4vw;
  }

  #key-achievement-wrapper-08 h4, #key-achievement-wrapper-11 h4 {
    font-size: clamp(20px, 4vw, 26px);
  }

  #key-achievement-wrapper-11 {
    margin-bottom: -10px;
  }

  .key-achievement-no {
    font-size: clamp(45px, 8vw, 62px);
  }

  #key-achievement-row-02 {
    margin-top: 0;
  }

  #key-achievement-row-02 .row-content {
    gap: 40px;
  }

  #key-achievement-row-02 .trapezoid::before {
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);
  }

  #key-achievement-row-02 .trapezoid::after {
    clip-path: polygon(0 1.5%, 100% 21.5%, 100% 100%, 0% 100%);
  }

  #key-achievement-row-03 .row-wrapper {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 95px;
    gap: 50px 30px;
  }

  #key-achievement-row-03 .row-wrapper > div {
    flex-direction: column;
    gap: 10px;
  }

  #key-achievement-row-03 .row-wrapper > div:nth-child(1),
  #key-achievement-row-03 .row-wrapper > div:nth-child(2) {
    width: 60%;
    margin-left: auto;
  }

  #key-achievement-row-03 .row-wrapper > div:nth-child(n+3) {
    width: calc(100% / 2 - 15px);
  }

  #key-achievement-row-03 .row-wrapper > div svg {
    width: 47px;
    max-height: 40px;
  }

  #key-achievement-row-03 .row-wrapper h4 {
    font-size: clamp(18px, 4vw, 26px);
  }

  #key-achievement-row-03 .row-wrapper h5 {
    font-size: clamp(16px, 3vw, 21px);
  }

  #key-achievement-row-04 {
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
    max-width: unset;
  }

  #key-achievement-row-04 .row-title {
    gap: 7px;
  }

  #key-achievement-row-04 p {
    margin-bottom: 5px;
  }
  
  #key-achievement-vector-01 {
    display: none;
  }

  #key-achievement-vector-02,
  #key-achievement-vector-03 {
    display: none;
  }

  #key-achievement-row-03 {
    position: relative;
  }

  #key-achievement-vector-04 {
    position: absolute;
    top: -20%;
    left: 0;
    width: 42vw;
    display: block;
    z-index: -1;
  }
}

@media screen and (max-width: 500px) {
  #key-achievement-vector-04 {
    top: -5%;
  }
}

/* ==================================== */
/* ========== END of Key Achievement ============ */
/* ==================================== */

/* ========= About Alliance =========== */
.about-alliance-intro {
  position: relative;
  margin-top: 90px;
  margin-bottom: 105px;
}

.about-alliance-intro img {
    width: 51vw;
    height: auto;
    display: block;
}

.about-alliance-intro .container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.about-alliance-intro .text-wrapper {
  width: 52.5%;
  margin-left: auto;
  margin-bottom: -150px;
}

.about-alliance-intro .section-title {
  margin-bottom: 30px;
}

.section-sustainability-value-chain {
  margin-top: 150px;
}

.section-sustainability-value-chain h3 {
  margin-bottom: 50px;
  padding-left: 23px;
}

.section-sustainability-value-chain img {
  width: 100%;
  height: auto;
  display: block;
}

.section-business-and-operations {
  margin-top: 70px;
}

.business-and-operations-item-01 {
  margin-top: 50px;
  position: relative;
}

.business-and-operations-item-02 {
  position: relative;
  margin-top: -5vw;
}

.business-and-operations-item-03 {
  position: relative;
  margin-top: -7vw;
}

.business-and-operations-item-01 .text-wrapper,
.business-and-operations-item-02 .text-wrapper,
.business-and-operations-item-03 .text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 50px;
  padding-bottom: 65px;
  position: relative;
}

.business-and-operations-item-01 .trapezoid {
  width: 61.4vw;
}

.business-and-operations-item-02 .trapezoid {
  width: 66.7vw;
}

.business-and-operations-item-03 .trapezoid {
  width: 74.6vw;
}

.business-and-operations-item-01 .text-wrapper {
  max-width: 27.4vw;
  margin-right: auto;
}

.business-and-operations-item-02 .text-wrapper {
  max-width: 35.6vw;
  margin-left: auto;
}

.business-and-operations-item-03 .text-wrapper {
  max-width: 42.6vw;
  margin-right: auto;
}

.business-and-operations-item-03 .date {
  position: absolute;
  bottom: 30px;
  right: 0;
  font-weight: 300;
  color: #231815;
}

.section-business-and-operations .row-items {
  display: flex;
  flex-direction: row;
  gap: 100px;
  align-items: flex-start;
  justify-content: flex-start;
}

.section-business-and-operations .row-items .row-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-business-and-operations .row-items .row-item .value {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
}

.section-business-and-operations .counter {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
}

.section-business-and-operations .row-items .row-item p {
  margin-top: 5px;
}

#business-and-operations-item-02-vector {
  display: block;
  width: 31.4vw;
  height: auto;
  margin-right: 6vw;
  margin-left: auto;
}

#business-and-operations-item-03-vector {
  display: block;
  width: 37.4vw;
  height: auto;
  margin-left: 1.6vw;
  margin-right: auto;
}

.section-our-ambition {
  margin-top: 150px;
  margin-bottom: 170px;
}

.section-our-ambition .text-wrapper {
  width: 38.5vw;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.ambition-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 50px;
  align-items: flex-start;
}

.ambition-row .ambition-item {
  width: calc(100% / 2 - 25px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-strategic-pillars {
  margin-bottom: 20px;
  position: relative;
}

.section-strategic-pillars .text-wrapper {
  width: 46.3vw;
  margin-left: 54px;
}

.strategic-row-01,
.strategic-row-02,
.strategic-row-03 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-left: 80px;
  margin-right: 80px;
}

.strategic-row-01 {
  padding-top: 50px;
  padding-bottom: 30px;
}

.strategic-row-02 {
  align-items: center;
  padding-top: 40px;
  padding-bottom: 50px;
}

.strategic-row-03 {
  padding-top: 30px;
}

.strategic-row-01 > .strategic-item,
.strategic-row-02 > .strategic-item,
.strategic-row-03 > .strategic-item {
  min-width: 180px;
}

.strategic-grid {
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
}

.strategic-grid::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -70px;
  right: -70px;
  bottom: -40px;
  background-color: var(--color-polygon-blue-300);
  z-index: -1;
}

.strategic-grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: flex-end;
  padding: 0 30px;
}

#about-alliance-vector-01 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 47.9vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#about-alliance-vector-02 {
  position: absolute;
  left: 0;
  top: -70px;
  width: 18.75vw;
  height: auto;
  object-fit: contain;
  z-index: -1;
}


#about-alliance-vector-03 {
  position: absolute;
  right: 21.4vw;
  bottom: 6.4vw;
  width: 8.3vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#about-alliance-vector-04 {
  display: none;
}

#about-alliance-vector-05,
#about-alliance-vector-06 {
  display: none;
}

@media screen and (max-width: 2200px) {
  .about-alliance-intro {
    margin-top: 70px;
    margin-bottom: 90px;
  }

  .about-alliance-intro img {
    width: 52.5vw;
  }

  .about-alliance-intro .text-wrapper {
    width: 51%;
    margin-bottom: -170px;
  }

  .about-alliance-intro .section-title {
    margin-bottom: 20px;
  }

  .section-sustainability-value-chain h3 {
    margin-bottom: 40px;
  }

  .business-and-operations-item-01 {
    margin-top: 40px;
  }

  .business-and-operations-item-01 .text-wrapper, .business-and-operations-item-02 .text-wrapper, .business-and-operations-item-03 .text-wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
    gap: 30px;
  }

  .section-business-and-operations .counter {
    font-size: 55px; 
  }

  .section-business-and-operations .row-items {
    gap: 70px;
  }

  .section-business-and-operations .row-items .row-item .value {
    gap: 8px;
  }

  .business-and-operations-item-03 .date {
    font-size: 12px;
  }

  .section-our-ambition {
    margin-top: 120px;
    margin-bottom: 130px;
  }

  .section-our-ambition .text-wrapper {
    gap: 30px;
  }

  .ambition-row {
    gap: 25px 30px;
  }

  .ambition-row .ambition-item {
    width: calc(100% / 2 - 15px);
    gap: 8px;
  }

  .strategic-row-01, .strategic-row-02, .strategic-row-03 {
    margin-left: 50px;
    margin-right: 50px;
  }

  .strategic-item svg {
    width: 55px;
    max-height: 60px;
  }

  .strategic-row-01 {
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .strategic-row-02 {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .strategic-row-03 {
    padding-top: 30px;
  }

  .strategic-grid-row {
    gap: 50px;
  }

  .strategic-grid::before {
    top: -2vw;
    left: -2vw;
    right: -2vw;
    bottom: -2vw;
  }
}

@media screen and (max-width: 1600px) {
  .about-alliance-intro img {
    width: 51vw;
  }

  .about-alliance-intro .text-wrapper {
    margin-bottom: -20%;
  }

  .section-sustainability-value-chain {
    margin-top: 20vw;
  }

  .business-and-operations-item-01 .text-wrapper {
    max-width: 40vw;
  }

  .business-and-operations-item-02 .text-wrapper {
    max-width: 47vw;
  }

  .business-and-operations-item-03 .text-wrapper {
    max-width: 53vw;
  }

  .section-our-ambition .text-wrapper {
    width: 57vw;
  }

  .section-strategic-pillars .text-wrapper {
    width: 51vw;
    margin-left: 0;
  }
}

@media screen and (max-width: 1200px) {
  .about-alliance-intro img {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .about-alliance-intro .container {
    position: unset;
  }

  .about-alliance-intro .text-wrapper {
    width: unset;
    margin-bottom: unset;
    padding-top: 50px;
  }


  .about-alliance-intro .section-title,
  .about-alliance-intro .text-wrapper > p:first-of-type {
    width: 50%;
    margin-left: auto;
  }

  .section-sustainability-value-chain {
    margin-top: 80px;
  }

  .section-business-and-operations .row-items {
    gap: 40px;
  }

  .strategic-row-01, .strategic-row-02, .strategic-row-03 {
    margin-left: 0;
    margin-right: 30px;
  }

}

@media screen and (max-width: 1024px) {
  .about-alliance-intro {
    margin-top: 50px;
    margin-bottom: 80px;
  }

  .about-alliance-intro .text-wrapper {
    padding-top: 40px;
  }

  .about-alliance-intro .section-title {
    margin-bottom: 10px;
  }

  .section-sustainability-value-chain h3 {
    padding-left: 0;
    margin-bottom: 50px;
  }

  .section-business-and-operations {
    margin-top: 80px;
  }

  .business-and-operations-item-01 {
    margin-top: 20px;
  }

  .business-and-operations-item-01 .trapezoid {
    width: 88.6vw;
  }

  .business-and-operations-item-01 .text-wrapper {
    max-width: 70.6vw;
  }

  .section-business-and-operations .row-items {
    gap: 50px;
  }

  .business-and-operations-item-01 .text-wrapper, .business-and-operations-item-02 .text-wrapper, .business-and-operations-item-03 .text-wrapper {
    gap: 20px;
  }

  .section-business-and-operations .counter {
    font-size: 52px;
  }

  .business-and-operations-item-02 {
    margin-top: 13px;
  }

  .business-and-operations-item-02 .trapezoid {
    width: 95vw;
  }

  .business-and-operations-item-02 .text-wrapper {
    max-width: 75.7vw;
  }

  #business-and-operations-item-02-vector {
    width: 51.4vw;
  }

  #business-and-operations-item-03-vector {
    width: 49.11vw;
  }

  .business-and-operations-item-03 {
    margin-top: 16px;
    overflow: hidden;
  }

  .business-and-operations-item-03 .trapezoid {
    width: 105%;
  }

  .business-and-operations-item-03 .text-wrapper {
    max-width: 68.75vw;
  }

  .section-business-and-operations .row-items {
    flex-wrap: wrap;
  }

  .section-business-and-operations .business-and-operations-item-03 .row-items {
    gap: 20px;
  }

  .section-business-and-operations .business-and-operations-item-03 .row-items .row-item {
    width: calc(100% / 3 - (40px / 3));
    flex:none;
  }

  .section-our-ambition {
    margin-top: 100px;
  }

  .ambition-row {
    gap: 30px 50px;
  }

  .section-our-ambition .text-wrapper {
    width: 80vw;
  }

  .ambition-row .ambition-item {
    gap: 10px;
    width: calc(100% / 2 - 25px);
  }

  .section-strategic-pillars .text-wrapper {
    width: 100%;
  }

  .strategic-row-01, .strategic-row-02, .strategic-row-03 {
    margin-left: 30px;
    margin-right: 30px;
  }

  #about-alliance-vector-01 {
    display: none;
  }

  .strategic-row-01 {
    padding-top: 60px;
  }

  .strategic-row-02 {
    padding-bottom: 50px;
  }

  .strategic-row-03 {
    padding-top: 50px;
  }

  .strategic-item svg {
    width: 50px;
    max-height: 55px;
  }

  .strategic-grid::before {
    top: -5vw;
    left: 0vw;
    right: 0vw;
    bottom: -5vw;
  }

  #about-alliance-vector-02 {
    left: unset;
    right: 0;
    top: -42%;
    width: 24.5vw;
  }

  #about-alliance-vector-03 {
    display: none;
  } 

  #about-alliance-vector-04 {
    position: absolute;
    top: -63%;
    right: 0;
    width: 25.2vw;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: -1;
  }

  .business-and-operations-item-03 .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 69% 100%, 0% 100%);
  }

  .business-and-operations-item-03 .trapezoid::after {
    clip-path: polygon(0 0, 98.9% 0, 67.9% 100%, 0% 100%);
  }
}

@media screen and (max-width: 768px) {
  .about-alliance-intro {
    margin-top: 80px;

  }

  .about-alliance-intro .container {
    flex-direction: column;
    position: relative;
  }

  .about-alliance-intro img {
    position: unset;
    width: auto;
  }

  .about-alliance-intro .section-title {
    margin-bottom: 40px;
  }

  .about-alliance-intro .text-wrapper {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-alliance-intro .section-title, .about-alliance-intro .text-wrapper > p:first-of-type {
    width: auto;
  }

  .section-sustainability-value-chain h3 {
    margin-bottom: 30px;
  }

  .section-business-and-operations {
    margin-top: 40px;
  }

  .business-and-operations-item-01 {
    margin-top: 30px;
  }

  .business-and-operations-item-01 .text-wrapper, .business-and-operations-item-02 .text-wrapper, .business-and-operations-item-03 .text-wrapper {
    gap: 40px;
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-extend);
    padding-left: 20px;
    padding-right: 20px;
  }

  .business-and-operations-item-01 .text-wrapper,
  .business-and-operations-item-02 .text-wrapper,
  .business-and-operations-item-03 .text-wrapper {
    max-width: unset;
  }

  .business-and-operations-item-01 .row-items {
    max-width: 370px;
  }

  .business-and-operations-item-01 .row-items > .row-item:first-of-type {
    width: 100%;
    flex: none;
  }

  .business-and-operations-item-02 .row-items > .row-item:first-of-type {
    width: 100%;
    flex: none;
  }

  .business-and-operations-item-02 .trapezoid {
    transform: scaleY(-1);
  }

  .business-and-operations-item-03 .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%);
  }

  .business-and-operations-item-03 .trapezoid::after {
    clip-path: polygon(0 0, 100% 0, 100% 98.5%, 0% 83.5%);
  }

  .section-business-and-operations .business-and-operations-item-03 .row-items {
    gap: 50px 20px;
  }

  .section-business-and-operations .business-and-operations-item-03 .row-items .row-item {
    width: calc(100% / 2 - 10px);
    flex: none;
  }

  #business-and-operations-item-02-vector ,
  #business-and-operations-item-03-vector {
    width: 85vw;
    margin-left: auto;
    margin-right: auto;
  }

  .section-business-and-operations .counter {
    font-size: clamp(40px, 6vw, 52px);
  }

  .business-and-operations-item-03 .date {
    bottom: 5rem;
    right: 20px;
  }

  .ambition-row {
    gap: 20px;
  }

  .section-our-ambition {
    margin-top: 150px;
    margin-bottom: 80px;
  }

  .ambition-row .ambition-item {
    width: auto;
  }

  .strategic-row-01, .strategic-row-02, .strategic-row-03 {
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
  }

  .strategic-row-01 {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  .strategic-row-03 {
    padding-top: 45px;
  }

  .strategic-row-01 > .strategic-item, .strategic-row-02 > .strategic-item, .strategic-row-03 > .strategic-item {
    min-width: unset;
  }

  .strategic-grid {
    gap: 16px;
  }

  .strategic-grid-row {
    gap: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }

  #about-alliance-vector-02 {
    display: none;
  }

  #about-alliance-vector-04 {
    top: -40%;
    width: 40.2vw;
  }

  #about-alliance-vector-05 {
    position: absolute;
    top: -30%;
    left: 0;
    width: 59vw;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: -1;
  }

  #about-alliance-vector-06 {
    position: absolute;
    top: 0;
    right: 0;
    left: unset;
    width: 43.4vw;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: -1;
  }
}

@media screen and (max-width: 500px) {
  .about-alliance-intro {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .about-alliance-intro .section-title {
    margin-bottom: 20px;
  }

  .strategic-row-01, .strategic-row-02, .strategic-row-03 {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .strategic-row-02 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .strategic-grid::before {
    left: -2vw;
    right: -2vw;
  }

  .section-business-and-operations .row-items {
    gap: 30px;
  }

  .section-sustainability-value-chain {
    margin-top: 60px;
  }

  .section-business-and-operations {
    margin-top: 30px;
  }

  .business-and-operations-item-01 .text-wrapper, .business-and-operations-item-02 .text-wrapper, .business-and-operations-item-03 .text-wrapper {
    padding-top: 40px;
    padding-bottom: 140px;
  }
}

/* ==================================== */
/* ========== END of About Alliance ============ */
/* ==================================== */

/* ========= Stakeholder Engagement =========== */
.main-stakeholder-engagement .text-intro {
  margin-top: 100px;
}
.our-stakeholder-wrapper {
  margin-top: 114px;
}

.our-stakeholder-wrapper img {
  width: 31.4vw;
  height: auto;
  display: block;
  margin-left: 45px;
}

.our-stakeholder-wrapper .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
  margin-left: auto;
  margin-right: auto;
  max-width: 36.4vw;
}

.our-stakeholder-wrapper h3 {
  margin-bottom: 10px;
}

.section-stakeholder-list {
  margin-top: 100px;
  padding-bottom: 100px;
}

.stakeholder-list {
  max-width: 46.7vw;
  margin-left: auto;
  margin-right: 4vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px 50px;
  align-items: flex-start;
}

.stakeholder-list .stakeholder-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: flex-start;
  gap: 40px;
}

.stakeholder-list .stakeholder-item:nth-child(7) {
  grid-column-start: 2;
  grid-column-end: 3;
}

.stakeholder-list .stakeholder-item:nth-child(8) {
  grid-column-start: 3;
  grid-column-end: 4;
}

.stakeholder-item svg {
  width: 90px;
  height: auto;
}

.stakeholder-item .stakeholder-description ul {
  margin-top: 0px;
  padding-left: 30px;
  margin-bottom: 0;
}

#stakeholder-engagement-vector-01 {
  position: absolute;
  top: -13vw;
  left: 0;
  width: 51vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-02 {
  position: absolute;
  right: 0;
  top: 50px;
  width: 22.4vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-03 {
  position: absolute;
  bottom: 20px;
  right: 6.5vw;
  width: 6.4vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.section-engagement-process {
  margin-top: 100px;
}


.section-engagement-process h3 {
  margin-bottom: 50px;
}

.section-engagement-process .text-wrapper {
  width: 33.8vw;
  margin-left: auto;
  margin-right: 18.75vw;
  padding-block: var(--trapezoid-padding-vertical);
}

.section-engagement-process-items {
  margin-top: 100px;
  margin-bottom: 100px;

}

.engagement-process-row {
  display: flex;
  flex-direction: row;
  gap: 130px;
  align-items: flex-start;
  justify-content: center;
  width: 54vw;
  margin-left: auto;
}

.engagement-process-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: calc(100% / 4 - ((130px * 3) / 4));
  position: relative;
}

.engagement-process-item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 150px;
  left: -65px;
  width: 20px;
  height: 40px;
  background-image: url('../images/stakeholder-engagement/chevron.png');
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}

.section-special-engagement-events {
  padding-top: 50px;
}

.event-online-survey {
  margin-top: 50px;
  position: relative;
}

.section-special-engagement-events .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
  width: 51.6vw;
  margin-right: auto;
}

.event-online-survey .trapezoid {
  width: 89%;
}

.event-online-survey .online-survey-row {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
  width: 39.4vw;
}

.event-online-survey .online-survey-row > div {
  flex: 1;
}

.event-online-survey .online-survey-row picture {
  width: 36.8%;
  height: auto;
  display: block;
}

.section-special-engagement-events .gallery-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 50px;
}

.section-special-engagement-events .gallery-row .gallery-item {
  width: calc(100% / 3 - (20px * 2 / 3));
}

.section-special-engagement-events .gallery-row .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.event-staff-focus-groups {
  position: relative;
}

.event-staff-focus-groups .trapezoid {
  width: 88%;
}

.section-major-feedback-received .max-width-1098 {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-major-feedback-received h3 {
  margin-bottom: 50px;
}



#stakeholder-engagement-vector-04 {
  position: absolute;
  top: -77%;
  right: 0;
  width: 32vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-05 {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.3vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-06 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 19.9vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-07 {
  position: absolute;
  top: 0;
  left: 0;
  width: 18.75vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#stakeholder-engagement-vector-08 {
  position: absolute;
  bottom: 40%;
  right: 7.2vw;
  width: 7.7vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#our-stakeholder-vector-09,
#our-stakeholder-vector-10 {
  display: none;
}

#stakeholder-engagement-vector-11,
#stakeholder-engagement-vector-12 {
  display: none;
}

@media screen and (min-width: 769px) {
  .our-stakeholder-wrapper .trapezoid {
    width: 90%;
    transform: scaleY(-1);
  }

  .our-stakeholder-wrapper .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 77% 100%, 0% 100%);
  }

  .our-stakeholder-wrapper .trapezoid::after {
    clip-path: polygon(0 0, 99% 0, 76% 100%, 0% 100%);
  }

  .section-engagement-process .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%);
  }

  .section-engagement-process .trapezoid::after {
    clip-path: polygon(0 0, 99% 0, 73% 100%, 0% 100%);
  }

  #major-feedback-innovation-trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 83% 100%, 0% 100%);
  }

  #major-feedback-innovation-trapezoid::after {
    clip-path: polygon(0 0, 99% 0, 82% 100%, 0% 100%);
  }

  .section-engagement-process .trapezoid {
    transform: scaleX(-1);
    width: 120%;
    right: unset;
    left: 0;
  }
}

@media screen and (min-width: 1025px) {
  .our-stakeholder-wrapper .trapezoid {
    width: 81%;
  }

  .our-stakeholder-wrapper .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  }

  .our-stakeholder-wrapper .trapezoid::after {
    clip-path: polygon(0 0, 99% 0, 89% 100%, 0% 100%)
  }

  .section-engagement-process .trapezoid {
    width: 73%;
    transform: scaleY(-1);
    inset: 0;
  }
}

@media screen and (max-width: 2200px) {
  .main-stakeholder-engagement .text-intro {
    margin-top: 70px;
  }

  .our-stakeholder-wrapper {
    margin-top: 80px;
  }

  .section-stakeholder-list {
    margin-top: 70px;
    padding-bottom: 80px;
  }

  .stakeholder-item svg {
    width: 70px;
  }

  .stakeholder-list {
    gap: 50px 40px;
  }

  .stakeholder-list .stakeholder-item {
    gap: 20px;
  }

  #stakeholder-engagement-vector-01 {
    width: 50vw;
    top: -7vw;
  }

  .section-engagement-process h3 {
    margin-bottom: 35px;
  }

  .section-engagement-process-items {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .section-engagement-process-items svg {
    width: 80px;
    max-height: 70px;
  }

  .engagement-process-row {
    gap: 100px;
  }

  .engagement-process-item {
    gap: 20px;
    width: calc(100% / 4 - ((100px * 3) / 4));
  }

  .engagement-process-item:not(:first-child)::before {
    top: 110px;
    left: -47px;
    width: 15px;
    height: 30px;
  }

  .section-special-engagement-events {
    padding-top: 20px;
  }

  .event-online-survey {
    margin-top: 40px;
  }

  .event-online-survey .online-survey-row {
    margin-top: 30px;
    gap: 40px;
  }

  .section-special-engagement-events .gallery-row {
    margin-top: 30px;
    gap: 14px;
  }

  .section-special-engagement-events .gallery-row .gallery-item {
    width: calc(100% / 3 - (14px * 2 / 3));
  }

  .section-special-engagement-events .gallery-row .gallery-item img {
    width: 100%;
    height: auto;
  }

  .section-major-feedback-received .max-width-1098 {
    max-width: 45%;
  }

  .section-major-feedback-received h3 {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1500px) {
  .our-stakeholder-wrapper .text-wrapper {
    max-width: 650px;
  }

  .section-engagement-process .trapezoid {
    width: 88%;
  }

  .section-engagement-process .text-wrapper {
    width: 650px;
  }

  .engagement-process-row {
    width: 100%;
    max-width: 1000px;
  }

  .section-special-engagement-events .text-wrapper {
    width: 850px;
  }

  .event-online-survey .online-survey-row {
    width: 90%;
  }

  .section-major-feedback-received .max-width-1098 {
    max-width: 700px;
  }

  .section-major-feedback-received .trapezoid,
  .event-online-survey .trapezoid,
  .event-staff-focus-groups .trapezoid,
  .our-stakeholder-wrapper .trapezoid,
  .section-engagement-process .trapezoid
  {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .main-stakeholder-engagement .text-intro {
    margin-top: 50px;
  }

  .our-stakeholder-wrapper {
    margin-top: 50px;
  }

  .our-stakeholder-wrapper img {
    width: 49vw;
    margin-left: 40px;
  }

  .our-stakeholder-wrapper .text-wrapper {
    max-width: 61.4%;
    margin-left: 70px;
  }

  

  .section-stakeholder-list {
    padding-bottom: 100px;
    overflow: hidden;
    padding-left: 30px;
  }

  .stakeholder-list {
    max-width: 100%;
    margin-right: unset;
    margin-left: unset;
    gap: 80px 50px;
  }

  .stakeholder-item svg {
    width: 50px;
    height: auto;
  }

  #stakeholder-engagement-vector-01 {
    width: 26.2vw;
    top: unset;
    bottom: -10vw;
  }

  .section-engagement-process {
    margin-top: 0;
    overflow: hidden;
  }

  .section-engagement-process .text-wrapper {
    width: unset;
    margin-left: 60px;
    margin-right: 60px;
  }

  

  .section-engagement-process-items {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .engagement-process-row {
    justify-content: space-between;
    gap: unset;
  }

  .engagement-process-item {
    width: 20%;
  }

  .engagement-process-item h5 {
    font-size: 16px;
  }

  .engagement-process-item:not(:first-child)::before {
    left: -17%;
    top: 94px;
  }

  .section-engagement-process-items svg {
    width: 60px;
    max-height: 50px;
  }

  .section-special-engagement-events {
    padding-top: 70px;
  }

  #stakeholder-engagement-vector-04 {
    width: 26.2vw;
    top: -63%;
  }

  .event-online-survey .trapezoid {
    transform: scaleY(-1);
  }

  .section-special-engagement-events .text-wrapper {
    width: 760px;
    max-width: 90%;
  }

  .event-online-survey .online-survey-row {
    width: auto;
  }

  .section-special-engagement-events .gallery-row {
    gap: 10px;
  }

  .section-special-engagement-events .gallery-row .gallery-item {
    width: calc(100% / 3 - (10px * 2 / 3));
  }

  .event-staff-focus-groups .trapezoid {
    transform: scaleY(-1);
  }

  .section-major-feedback-received .max-width-1098 {
    max-width: 670px;
  }

  .section-major-feedback-received .trapezoid {
    width: 108%;
  }

  .section-major-feedback-received {
    overflow: hidden;
  }

  #stakeholder-engagement-vector-08 {
    width: 8.9vw;
    right: 30px;
    bottom: 0;
  }

  #stakeholder-engagement-vector-03 {
    display: none;
  }

  #stakeholder-engagement-vector-02 {
    display: none;
  }

  #our-stakeholder-vector-09 {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 24.5vw;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }

  #our-stakeholder-vector-10 {
    display: block;
    position: absolute;
    top: 0;
    right: 100px;
    width: 8.9vw;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }
}

@media screen and (max-width: 768px) {
  #our-stakeholder-vector-09,
  #our-stakeholder-vector-10 {
    display: none;
  }

  .our-stakeholder-wrapper img {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .our-stakeholder-wrapper .text-wrapper {
    max-width: 100%;
    margin-left: 50px;
    margin-right: 50px;
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-extend);
  }

  .section-stakeholder-list {
    margin-top: 50px;
    padding-left: 0;
  }

  .stakeholder-list {
    gap: 50px 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .stakeholder-list .stakeholder-item:nth-child(7) {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .stakeholder-list .stakeholder-item:nth-child(8) {
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .section-engagement-process-items {
    margin-bottom: 50px;
  }

  .section-engagement-process .text-wrapper {
    margin-left: 50px;
    margin-right: 50px;
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-extend);
  }

  .section-engagement-process h3 {
    margin-bottom: 20px;
  }

  .section-engagement-process .trapezoid {
    transform: scaleX(-1) scaleY(-1);
  }

  .engagement-process-row {
    flex-direction: column;
    width: 50%;
    margin-left: auto;
    margin-right: 30px;
    gap: 90px;
  }

  .engagement-process-item {
    width: 100%;
  }

  .engagement-process-item:not(:first-child)::before {
    left: 46%;
    top: -50px;
    transform: rotate(90deg) translateX(-50%);
  }

  .event-online-survey {
    margin-top: 35px;
  }

  .section-special-engagement-events .text-wrapper {
    width: auto;
    max-width: unset;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-extend);
  }

  .event-online-survey .online-survey-row {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }

  .event-online-survey .online-survey-row picture {
    width: 100%;
  }

  .event-online-survey .trapezoid {
    transform: scaleY(-1) scaleX(-1);
  }

  .event-sustainability-expert-forum .text-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 50px;
    margin-top: 200px;
  }

  .section-special-engagement-events .gallery-row {
    flex-wrap: wrap;
  }

  .section-special-engagement-events .gallery-row .gallery-item {
    width: calc(100% / 2 - 5px);
  }

  .section-major-feedback-received .max-width-1098 {
    max-width: unset;
    padding-left: 30px;
    padding-right: 30px;
  }

  #stakeholder-engagement-vector-05,
  #stakeholder-engagement-vector-06 {
    display: none;
  }

  #major-feedback-innovation-trapezoid + .max-width-1098,
  #major-feedback-resources-trapezoid + .max-width-1098 {
    padding-top: 100px;
    padding-left: 50px;
    padding-right: 50px;
  }

  #major-feedback-resources-trapezoid + .max-width-1098 {
    padding-top: 50px;
    padding-bottom: 100px;
  }

  #stakeholder-engagement-vector-07 {
    display: none;
  }

  #stakeholder-engagement-vector-08 {
    width: 18vw;
    right: 30px;
  }

  #stakeholder-engagement-vector-11 {
    display: block;
    position: absolute;
    top: 30%;
    right: 0;
    width: 43.4vw;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }

  .stakeholder-item svg {
    width: 11vw;
  }

  #stakeholder-engagement-vector-01 {
    display: none;
  }

  #stakeholder-engagement-vector-12 {
    display: block;
    position: absolute;
    top: 45%;
    left: 0;
    transform: translateY(-50%);
    width: 44.8vw;
    height: auto;
    object-fit: contain;
    z-index: -1;
  }

  #stakeholder-engagement-vector-04 {
    top: 82%;
    width: 45.1vw;
  }
  
}

/* ==================================== */
/* ========== END of Stakeholder Engagement ============ */
/* ==================================== */

/* ========= Materiality Process =========== */

.main-materiality-process .text-intro {
  margin-top: 100px;
}

.section-material-process {
  padding-top: 100px;
}

.section-material-process img {
  width: 100%;
  height: auto;
  display: block;
}

.section-material-issues {
  margin-top: 70px;
  margin-bottom: 100px;
}

.section-material-issues .trapezoid {
  width: 81%;
}

.section-material-issues .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
  max-width: 42.89vw;
  margin-right: auto;
}

.section-material-issues .text-wrapper h3 {
  margin-bottom: 10px;
}

.section-material-issues-table table {
  width: 100%;
  border-collapse: collapse;
}

.section-material-issues-table table thead {
  background-image: url('../images/materiality-process/table-header.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.section-material-issues-table table th {
  padding: 25px 0;
  text-align: center;
}

.section-material-issues-table {
  margin-bottom: 100px;
}

.section-material-issues-table table td {
  padding: 50px 0 40px;
  text-align: center;
}

.section-material-issues-table table th:first-child,
.section-material-issues-table table td:first-child {
  text-align: left;
  width: 350px;
  padding-left: 40px;
}

.section-material-issues-table table th:last-child,
.section-material-issues-table table td:last-child {
  width: 100px;
}

.section-material-issues-table table tbody tr:not(:last-child) {
  border-bottom: 1px solid #CEECF9;
}

.table-tick {
  width: 50px;
  height: auto;
  display: inline-block;
}

#materiality-process-vector-1 {
  position: absolute;
  top: 2vw;
  right: 0;
  width: 22.42vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#materiality-process-vector-2 {
  position: absolute;
  top: 55%;
  right: 6.56vw;
  transform: translateY(-50%);
  width: 6.4vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

@media screen and (max-width: 2200px) {
  .main-materiality-process .text-intro {
    margin-top: 70px;
  }

  .section-material-issues {
    margin-top: 50px;
    margin-bottom: 70px;
  }

  .section-material-issues-table {
    margin-bottom: 80px;
  }

  .section-material-issues-table table th:first-child, .section-material-issues-table table td:first-child {
    padding-left: 25px;
  }

  .section-material-issues-table table th:first-child, .section-material-issues-table table td:first-child {
    width: 22%;
  }

  .section-material-issues-table table td {
    padding: 36px 0 30px;
  }

  .section-material-issues-table table th {
    padding: 20px 0;
  }

  .section-material-issues-table table th:last-child, .section-material-issues-table table td:last-child {
    width: 8%;
  }

  .table-tick {
    width: 38px;
  }
}

@media screen and (min-width: 769px) {
  .section-material-issues .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
  }

  .section-material-issues .trapezoid::after {
    clip-path: polygon(0 0, 99% 0, 85% 100%, 0% 100%);
  }
}

@media screen and (max-width: 1400px) {
  .section-material-issues .text-wrapper {
    max-width: 700px;
  }

  .section-material-issues-table table th:last-child, .section-material-issues-table table td:last-child {
    width: 4%;
  }
}

@media screen and (max-width: 1024px) {
  .main-materiality-process .text-intro {
    margin-top: 50px;
  }

  .section-material-process {
    padding-top: 50px;
  }

  .section-material-issues .trapezoid {
    width: 100%;
  }

  .section-material-issues .text-wrapper {
    max-width: 680px;
  }

  .material-list {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .material-list .material-list-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
  }

  .material-list .material-list-item:not(:last-child) {
    border-bottom: 1px solid #CEECF9;
  }

  .material-list .material-list-item ul {
    padding-left: 40px;
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  .material-list .material-list-item ul li {
    margin-bottom: 10px;
    position: relative;
  }

  .material-list .material-list-item ul li::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../images/materiality-process/tick.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  .main-materiality-process .text-intro {
    margin-top: 70px;
  }

  .section-material-process {
    padding-top: 40px;
  }

  .section-material-issues {
    margin-top: 40px;
    margin-bottom: 50px;
  }

  .section-material-issues .text-wrapper {
    max-width: unset;
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-extend);
    margin-left: 30px;
    margin-right: 30px;
  }

  .material-list .material-list-item {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #materiality-process-vector-2 {
    display: none;
  }

  .section-material-issues-table {
    margin-bottom: 50px;
  }
}

/* ==================================== */
/* ========== END of Materiality Process ============ */
/* ==================================== */

/* ========= Governance in Sustainability =========== */
.main-governance-in-sustainability .text-intro {
  margin-top: 100px;
  margin-bottom: 100px;
}

.main-governance-in-sustainability .text-intro h3 {
  padding-left: 50px;
  padding-bottom: 30px;
}

#governance-in-sustainability-vector-01 {
  position: absolute;
  top: -7vw;
  left: 0;
  width: 23vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#governance-in-sustainability-vector-02 {
  position: absolute;
  top: -7.5vw;
  right: 0;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2;
}

#governance-in-sustainability-vector-03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.3vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.section-importance-cybersecurity .text-media-row,
.section-major-threats-identified .text-wrapper,
.section-addressing-cybersecurity-risks .container,
.section-cybersecurity {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-importance-cybersecurity .text-media-row {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
  max-width: 52vw;
}

.section-importance-cybersecurity .text-media-row .text-block {
  flex: 1;
}

.section-importance-cybersecurity .text-media-row .media-block {
  width: 36.2%;
}

.section-importance-cybersecurity h5,
.section-major-threats-identified h5,
.section-addressing-cybersecurity-risks h5 {
  margin-bottom: 30px;
}

.section-importance-cybersecurity ul,
.section-major-threats-identified ul {
  margin-top: 0;
  padding-left: 24px;
  margin-bottom: 0;
}

.section-importance-cybersecurity ul li,
.section-major-threats-identified ul li {
  margin-bottom: 1.7rem;
}

.section-importance-cybersecurity .trapezoid {
  width: 86.27%;
}

.section-major-threats-identified .text-wrapper {
  max-width: 55vw;
  margin-right: auto;
}

.section-addressing-cybersecurity-risks {
  overflow: hidden;
}

.section-addressing-cybersecurity-risks .trapezoid {
  width: 110%;
}

.section-addressing-cybersecurity-risks .media-block {
  width: 37.6%;
}

.section-addressing-cybersecurity-risks .text-media-row {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  padding-right: 64px;
  padding-bottom: 100px;
  max-width: 55vw;
}

.section-addressing-cybersecurity-risks .action-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 55vw;
}

.section-addressing-cybersecurity-risks .action-row .action-item {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  text-align: center;
  max-width: 13.7%;
  position: relative;
}

.section-addressing-cybersecurity-risks .action-row .action-item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 135px;
  left: -30%;
  width: 20px;
  height: 40px;
  background-image: url('../images/governance-in-sustainability/chevron.png');
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}

.section-addressing-cybersecurity-risks .action-row .action-item svg {
  width: 90px;
  height: 94px;
}

.section-addressing-cybersecurity-risks .action-row .action-item h5 {
  margin-bottom: 0;
}

.section-cybersecurity .text-wrapper {
  max-width: 55vw;
}

.section-cybersecurity ol {
  margin-top: 0;
  padding-left: 16px;
  margin-bottom: 50px;
}

.section-cybersecurity ol li {
  margin-bottom: 1.7rem;
}



@media screen and (max-width: 2200px) {
  .main-governance-in-sustainability .text-intro {
    margin-top: 70px;
    margin-bottom: 80px;
  }
  
  .main-governance-in-sustainability .text-intro h3 {
    padding-left: 40px;
    padding-bottom: 20px;
  }

  .section-importance-cybersecurity h5, .section-major-threats-identified h5, .section-addressing-cybersecurity-risks h5 {
    margin-bottom: 20px;
  }

  .section-importance-cybersecurity .text-media-row {
    gap: 40px;
    max-width: 53.5vw;
  }

  .section-addressing-cybersecurity-risks .text-media-row {
    padding-bottom: 70px;
    padding-right: 16px;
  }

  .section-addressing-cybersecurity-risks .text-block {
    flex: 1;
  }

  .section-addressing-cybersecurity-risks .media-block {
    width: 39.6%;
  }

  .section-addressing-cybersecurity-risks .text-media-row,
  .section-addressing-cybersecurity-risks .action-row,
  .section-cybersecurity .text-wrapper {
    max-width: 53.5vw;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item {
    gap: 20px;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item svg {
    width: 67px;
    height: 71px;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item:not(:first-child)::before {
    top: 110px;
    left: -27%;
    width: 16px;
    height: 34px;
  }
  
}

@media screen and (max-width: 1500px) {
  .section-importance-cybersecurity .text-media-row,
  .section-addressing-cybersecurity-risks .text-media-row,
  .section-addressing-cybersecurity-risks .action-row,
  .section-major-threats-identified .text-wrapper,
  .section-cybersecurity .text-wrapper {
    max-width: 1000px;
  }

  .section-importance-cybersecurity .trapezoid {
    width: 95%;
  }
}

@media screen and (max-width: 1200px) {
  .section-importance-cybersecurity .text-media-row,
  .section-addressing-cybersecurity-risks .text-media-row,
  .section-addressing-cybersecurity-risks .action-row,
  .section-major-threats-identified .text-wrapper,
  .section-cybersecurity .text-wrapper {
    max-width: 900px;
  }

  .section-importance-cybersecurity .trapezoid {
    width: 100%;
  }

  .section-addressing-cybersecurity-risks .trapezoid {
    width: 115%;
  }
}

@media screen and (max-width: 1024px) {
  .main-governance-in-sustainability .text-intro {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .main-governance-in-sustainability .text-intro h3 {
    padding-left: 20px;
  }

  #governance-in-sustainability-vector-01 {
    display: none;
  }

  .section-importance-cybersecurity .text-media-row, .section-addressing-cybersecurity-risks .text-media-row, .section-addressing-cybersecurity-risks .action-row, .section-major-threats-identified .text-wrapper, .section-cybersecurity .text-wrapper {
    max-width: 95%;
  }

  .section-importance-cybersecurity {
    overflow: hidden;
  }

  .section-importance-cybersecurity .trapezoid {
    width: 110%;
  }

  #governance-in-sustainability-vector-02 {
    display: none;
  }

  .section-importance-cybersecurity .text-media-row,
  .section-addressing-cybersecurity-risks .text-media-row {
    gap: 30px;
  }

  .section-addressing-cybersecurity-risks .text-media-row {
    padding-right: 0;
    padding-bottom: 50px;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item {
    max-width: 18%;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item svg {
    width: 50px;
    height: 53px;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item:not(:first-child)::before {
    top: 100px;
    left: -5%;
  }

  .section-addressing-cybersecurity-risks .trapezoid {
    width: 108%;
  }
}

@media screen and (max-width: 768px) {
  .section-importance-cybersecurity .text-media-row, .section-addressing-cybersecurity-risks .text-media-row {
    flex-direction: column;
  }

  .section-importance-cybersecurity .text-media-row, .section-addressing-cybersecurity-risks .text-media-row, .section-addressing-cybersecurity-risks .action-row, .section-major-threats-identified .text-wrapper, .section-cybersecurity .text-wrapper {
    max-width: unset;
  }

  .section-importance-cybersecurity .text-media-row,
  .section-addressing-cybersecurity-risks .container {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: var(--trapezoid-padding-extend);
    padding-bottom: var(--trapezoid-padding-vertical);
  }

  .section-importance-cybersecurity .text-media-row .media-block {
    width: 70%;
  }

  .section-major-threats-identified .text-wrapper, .section-cybersecurity {
    padding-block: var(--trapezoid-padding-vertical);
  }

  .section-addressing-cybersecurity-risks .media-block {
    width: 100%;
  }

  .section-addressing-cybersecurity-risks .action-row {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item {
    max-width: 100%;
    gap: 1rem;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item svg {
    width: 15vw;
    height: auto;
  }

  .section-addressing-cybersecurity-risks .action-row .action-item:not(:first-child)::before {
    left: 50%;
    top: -40px;
    transform: translateX(-50%) rotate(90deg);
  }

  .section-cybersecurity ol {
    margin-bottom: 30px;
  }
  
}

/* ==================================== */
/* ========== END of Governance in Sustainability ============ */
/* ==================================== */

/* ========= Improvement of Health & Safety =========== */
.main-improvement-of-health-safety .text-intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-health-safety-stat .trapezoid {
  width: 87%;
}

.max-width-health-safety {
  max-width: 51.64vw;
}

.max-width-technology {
  max-width: 47.7vw; 
}

.health-safety-stat {
  padding-block: var(--trapezoid-padding-vertical);
}

.health-safety-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.health-safety-item .activity-circle {
  width: 22%;
  padding: 0 1rem;
}

.health-safety-item .activity-circle .activity-icon {
  transform: translate(-35%, -25%);
}

.health-safety-item .activity-circle .activity-number {
  margin-bottom: 10px;
}

.health-safety-item .activity-circle.green .activity-icon::before {
  background-image: url('../images/improvement-of-health-safety/health-safety-icon-01.png');
}

.health-safety-item .activity-circle.blue .activity-icon::before {
  background-image: url('../images/improvement-of-health-safety/health-safety-icon-02.png');
}

.health-safety-item .activity-circle.pink .activity-icon::before {
  background-image: url('../images/improvement-of-health-safety/health-safety-icon-03.png');
}

.health-safety-item .activity-circle .activity-label p {
  font-size: var(--p-font-size);
  line-height: var(--p-line-height);
  font-weight: var(--p-font-weight);
  letter-spacing: initial;
}

.section-management-approach {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-management-approach .text-wrapper,
.section-management-commitment .text-wrapper {
  max-width: 58.9vw;
  margin-right: auto;
}

.section-management-approach h3 {
  margin-bottom: 30px;
}

.section-management-commitment {
  padding-top: 150px;
  padding-bottom: 150px;
}

.section-management-commitment .text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}

.section-management-commitment picture {
  width: 76.2%;
}

.section-health-safety-program h3 {
  margin-bottom: 50px;
}

.section-health-safety-program .text-wrapper,
.section-health-safety-program .text-media-row {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-health-safety-program .gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
  width: 93%;
}

.section-health-safety-program .gallery-row .gallery-item {
  width: calc(100% / 3 - (20px * 2 / 3));
}

.section-health-safety-program .gallery-row .gallery-item img {
  display: block;
}

.section-health-safety-program .text-media-row {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: flex-start;

}

.section-health-safety-program .text-media-row .text-block {
  flex: 1;
}

.section-health-safety-program .text-media-row .media-block {
  width: 31.7%;
}

.safety-design-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  max-width: 95%;
}

.safety-design-grid .safety-design-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.safety-design-grid .safety-design-item p {
  margin-right: 45px;
  width: 72.3%;
}

#improvement-of-health-safety-vector-01 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#improvement-of-health-safety-vector-02 {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-20%);
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2
}

#improvement-of-health-safety-vector-03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.3vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#improvement-of-health-safety-vector-04 {
  position: absolute;
  bottom: -5vw;
  right: 5vw;
  width: 7.6vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#health-safety-program-vector-05 {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-40%);
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#improvement-of-health-safety-vector-06 {
  position: absolute;
  bottom: 9.6vw;
  right: 5vw;
  width: 7.6vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#improvement-of-health-safety-vector-07 {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.3vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.section-health-safety-program ul {
  margin-top: 25px;
  padding-left: 25px;
}

@media screen and (min-width: 1025px) {
  #health-safety-program-trapezoid-01 {
    width: 92%;
  }

  #health-safety-program-trapezoid-02 {
    width: 96%;
  }

  #health-safety-program-trapezoid-03,
  #health-safety-program-trapezoid-04,
  #health-safety-program-trapezoid-05 {
    width: 89%;
  }
}

@media screen and (max-width: 2200px) {
  .main-improvement-of-health-safety .text-intro {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .health-safety-item .activity-circle .activity-number {
    margin-bottom: 5px;
  }

  .section-management-approach {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .section-management-approach h3 {
    margin-bottom: 20px;
  }

  .section-management-commitment {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .section-management-commitment .text-wrapper {
    gap: 40px;
  }

  .section-health-safety-program h3 {
    margin-bottom: 30px;
  }

  .section-health-safety-program .gallery-row {
    margin-top: 40px;
    gap: 14px;
  }

  .safety-design-grid {
    margin-top: 35px;
    margin-bottom: 35px;
    gap: 35px;
  }

  .section-health-safety-program ul {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1500px) {
  .max-width-health-safety {
    max-width: 900px;
  }

  .section-management-approach .text-wrapper, .section-management-commitment .text-wrapper {
    max-width: 1000px;
  }

  .max-width-technology {
    max-width: 850px;
  }
}

@media screen and (max-width: 1250px) {
  .section-health-safety-stat .trapezoid {
    width: 100%;
  }

  .max-width-health-safety,
  .max-width-technology {
    max-width: 800px;
  }

  .health-safety-item .activity-circle {
    width: 27%;
    margin-left: 2%;
  }

  #health-safety-program-trapezoid-01,
  #health-safety-program-trapezoid-02,
  #health-safety-program-trapezoid-03,
  #health-safety-program-trapezoid-04,
  #health-safety-program-trapezoid-05 {
    width: 100%;
  }

  .section-health-safety-program .text-media-row {
    gap: 30px;
  }
}

@media screen and (max-width: 1024px) {
  .main-improvement-of-health-safety .text-intro {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  /* .section-health-safety-stat, */
  .section-health-safety-program {
    overflow-x: hidden;
  }
  
  .section-health-safety-stat-trapezoid-wrapper{
    overflow-x: hidden;
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .section-health-safety-stat .trapezoid,
  #health-safety-program-trapezoid-01, #health-safety-program-trapezoid-02, #health-safety-program-trapezoid-03, #health-safety-program-trapezoid-04, #health-safety-program-trapezoid-05 {
    width: 105%;
  }

  .health-safety-item .activity-circle {
    width: 30%;
  }

  .max-width-health-safety, .max-width-technology {
    max-width: 95%;
  }

  .section-health-safety-program .gallery-row {
    margin-top: 30px;
  }

  .safety-design-grid {
    gap: 30px;
  }

  .safety-design-grid .safety-design-item p {
    margin-right: 2vw;
  }

  #improvement-of-health-safety-vector-04 {
    right: 3vw;
    width: 5.6vw;
  }

  #health-safety-program-vector-05 {
    display: none;
  }

  #improvement-of-health-safety-vector-06 {
    display: none
  }
}

@media screen and (max-width: 768px) {
  #improvement-of-health-safety-vector-02 {
    display: none;
  }

  .health-safety-stat,
  .section-health-safety-program .position-relative:has(.trapezoid) .text-wrapper, 
  .section-health-safety-program .position-relative:has(.trapezoid) .text-media-row
  {
    padding-top: var(--trapezoid-padding-extend);
    padding-bottom: var(--trapezoid-padding-vertical);
    padding-left: 30px;
    padding-right: 30px;
  }

  .health-safety-item {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .health-safety-item .activity-circle {
    width: 250px;
    margin-left: unset;
  }

  .section-management-approach,
  .section-management-commitment,
  .section-health-safety-program .text-media-row,
  .section-health-safety-program .text-wrapper {
    padding-top: var(--trapezoid-padding-vertical);
    padding-bottom: var(--trapezoid-padding-vertical);
  }

  .section-health-safety-program h3 {
    margin-bottom: 20px;
  }

  .section-health-safety-program .gallery-row {
    gap: 10px;
    width: 100%;
  }

  .section-health-safety-program .gallery-row .gallery-item {
    width: calc(100% / 2 - 5px);
  }

  .max-width-health-safety, .max-width-technology {
    max-width: 100%;
  }

  .section-health-safety-program .text-media-row {
    flex-direction: column;
    gap: 30px;
  }

  .section-health-safety-program .text-media-row .media-block {
    width: 100%;
  }

  .safety-design-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
  }

  .safety-design-grid .safety-design-item {
    gap: 10px;
  }

  .safety-design-grid .safety-design-item p {
    width: 76.3%;
  }
}

/* ==================================== */
/* ========== END of Improvement of Health & Safety ============ */
/* ==================================== */

/* ========= Competing for talents =========== */
.about-alliance-intro.reverse img {
  margin-left: auto;
}

.about-alliance-intro.reverse .text-wrapper {
  margin-left: unset;
  margin-right: auto;
}

.section-work-environment {
  margin-top: -20px;
  margin-bottom: 130px;
}

.section-work-environment .columns-4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 75px;
}

.section-work-environment .columns-4 > div {
  flex: 1;
  min-width: 165px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-work-environment .columns-4 > div img {
  display: block;
}

#competing-for-talents-vector-01 {
  position: absolute;
  top: -5vw;
  left: unset !important;
  right: 0;
  width: 30.82vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

@media screen and (min-width: 1025px) {
  .main-competing-for-talents .about-alliance-intro {
    margin-top: 80px;
  }

  .main-competing-for-talents .about-alliance-intro.reverse {
    margin-top: 100px;
  }

  .main-competing-for-talents .about-alliance-intro.reverse .text-wrapper {
    width: 50%;
    margin-bottom: unset;
  }
}

@media screen and (min-width: 2201px) {
  .main-competing-for-talents .about-alliance-intro {
    margin-top: 100px;
  }
}

@media screen and (max-width: 2200px) {
  .section-work-environment {
    margin-top: -30px;
    margin-bottom: 100px;
  }

  .section-work-environment .columns-4 {
    gap: 50px;
  }
}

@media screen and (max-width: 1600px) {
  .section-work-environment .columns-4 {
    gap: 3vw;
  }
}

@media screen and (max-width: 1200px) {
  .main-competing-for-talents .about-alliance-intro .section-title,
  .main-competing-for-talents .about-alliance-intro h3,
  .main-competing-for-talents .about-alliance-intro .text-wrapper > p:first-of-type {
    width: 50%;
    margin-left: auto;
  }

  .main-competing-for-talents .about-alliance-intro.reverse .section-title,
  .main-competing-for-talents .about-alliance-intro.reverse h3,
  .main-competing-for-talents .about-alliance-intro.reverse .text-wrapper > p:first-of-type {
    width: 100%;
    margin-left: unset;
  }

  /* #competing-for-talents-vector-01 {
    display: none;
  } */

  .main-competing-for-talents .about-alliance-intro.reverse {
    margin-top: 80px;
  }

  .about-alliance-intro.reverse img {
    left: unset;
    right: 0;
  }
}

@media screen and (max-width: 1024px) {
  .about-alliance-intro.reverse .text-wrapper {
    width: 58%;
  }

  #competing-for-talents-vector-01 {
    display: none;
  }

  .section-work-environment .columns-4 {
    gap: 1vw;
  }
}

@media screen and (max-width: 768px) {
  .main-competing-for-talents .about-alliance-intro .section-title, .main-competing-for-talents .about-alliance-intro h3, .main-competing-for-talents .about-alliance-intro .text-wrapper > p:first-of-type {
    width: 100%;
    margin-left: unset;
  }

  .main-competing-for-talents .about-alliance-intro .text-wrapper {
    padding-top: 40px;
  }

  .main-competing-for-talents .about-alliance-intro.reverse {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .about-alliance-intro.reverse .text-wrapper {
    width: 100%;
    margin-left: unset;
    margin-right: unset;
  }

  .section-work-environment {
    margin-top: unset;
    margin-bottom: 50px;
  }

  .section-work-environment .columns-4 {
    flex-wrap: wrap;
    gap: 30px;
  }

  .section-work-environment .columns-4 > div {
    flex: 1 1 calc(50% - 15px);
  }
}

/* ==================================== */
/* ========== END of Competing for talents ============ */
/* ==================================== */

/* ========= Community Support =========== */
.main-community-support .text-intro {
  margin-top: 100px;
}

.main-community-support .section-health-safety-program {
  margin-top: 150px;
  margin-bottom: 200px;
}

.main-community-support .section-health-safety-program h3 {
  margin-bottom: 100px;
}

.section-run-for-hope {
  background-color: rgba(235, 150, 32, .2);
  padding-block: var(--trapezoid-padding-vertical);
  position: relative;
}

#run-for-hope-banner {
  position: absolute;
  top: -220px;
  right: 0;
  width: 46.67vw;
  height: auto;
  object-fit: contain;
  display: block;

}

.run-for-hope .text-wrapper {
  max-width: 37.1vw;
}

.beneficiary-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 100px;
  margin-bottom: 150px;
}

.beneficiary-row .media-block {
  width: 24vw;
}

.beneficiary-row .text-block {
  width: 35.5vw;
}

.beneficiary-row .beneficiary-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 7.2%;
  margin-bottom: 10px;
}

.beneficiary-row .beneficiary-title h3 {
  margin-top: 2rem;
}

.beneficiary-row .beneficiary-title img {
  width: 50%;
  height: auto;
  display: block;
}

.beneficiary-row .beneficiary-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.beneficiary-data .beneficiary-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  padding: 35px 50px ;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, rgba(123, 203, 241, 0.7) 0%, rgba(123, 203, 241, 0) 100%);
}

.beneficiary-data .beneficiary-item .stat {
  display: flex;
  flex-direction: row;
  gap: 10px;
} 

.beneficiary-data .beneficiary-item .counter {
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  color: var(--color-navy-900);
}

.run-for-hope-content {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.fully-digitalized-event,
.fully-digitalized-event-v2 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 50px;
}

.fully-digitalized-event .media-block {
  width: 46.9%;
}

.fully-digitalized-event .text-block {
  width: 49.9%;
}

.fully-digitalized-event .full-block {
  width: 100%;
}

.fully-digitalized-event .text-block h3 {
  margin-bottom: 10px;
}

.fully-digitalized-event-v2 .media-block {
  width: 52.46%;
}

.fully-digitalized-event-v2 .text-block {
  width: 44.4%;
}

.fully-digitalized-event .gallery-row,
.fully-digitalized-event-v2 .gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.fully-digitalized-event .gallery-row .gallery-item,
.fully-digitalized-event-v2 .gallery-row .gallery-item {
  width: 100%;
}

.section-other-charity-run {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-other-charity-run .gallery-row {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  max-width: 60.5vw;
}

.section-other-charity-run .gallery-row .gallery-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-other-charity-run .gallery-row .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.section-critical-development {
  position: relative;
}

.section-critical-development .text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-block: var(--trapezoid-padding-vertical);
}

#community-support-vector-01 {
  position: absolute;
  top: 50px;
  left: 0;
  width: 23vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#community-support-vector-02 {
  position: absolute;
  top: -4vw;
  right: 0;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2;
}

#other-charity-run-vector {
  position: absolute;
  top: 0;
  right: 0;
  width: 24vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.section-critical-development {
  overflow: hidden;
}

.section-critical-development .trapezoid {
  width: 105%;
}

.fully-digitalized-event .media-block .gallery-row,
.fully-digitalized-event-v2 .media-block .gallery-row {
  display: none;
}

.gallery-swiper {
  display: none;
  padding-bottom: 3rem;
}

.gallery-swiper .swiper-button-next {
  background-image: url('../images/community-support/pagination-next.png');
  right: 37%;
}

.gallery-swiper .swiper-button-prev {
  background-image: url('../images/community-support/pagination-prev.png');
  left: 37%;
}

.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
  width: 15px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  top: unset;
  bottom: 1rem;
  padding: 10px;
}


@media screen and (max-width: 2200px) {
  .main-community-support .text-intro {
    margin-top: 70px;
  }

  .main-community-support .section-health-safety-program {
    margin-top: 130px;
    margin-bottom: 150px;
  }

  .main-community-support .section-health-safety-program h3 {
    margin-bottom: 80px;
  }

  #run-for-hope-banner {
    top: -8.5vw;
  }

  .beneficiary-row {
    margin-top: 80px;
    margin-bottom: 100px;
  }

  .beneficiary-data .beneficiary-item {
    padding: 35px 40px;
  }

  .beneficiary-data .beneficiary-item .counter {
    font-size: 54px;
  }

  .beneficiary-row .beneficiary-title img {
    width: 50%;
  }

  .beneficiary-row .beneficiary-data {
    gap: 5px;
  }

  .run-for-hope-content {
    gap: 70px;
  }

  .fully-digitalized-event, .fully-digitalized-event-v2 {
    gap: 30px 38px;
  }

  .section-other-charity-run .gallery-row {
    margin-top: 50px;
    gap: 20px 12px;
  }

  .section-other-charity-run .gallery-row .gallery-item {
    gap: 6px;
  }

  .section-critical-development .text-wrapper {
    gap: 20px;
  }
}

@media screen and (max-width: 1600px) {
  .section-critical-development .trapezoid {
    width: 115%;
  }

  .beneficiary-row .media-block {
    width: 40%;
  }

  .beneficiary-row .text-block {
    width: 50%;
  }
}

@media screen and (max-width: 1400px) {
  .fully-digitalized-event .media-block {
    width: 42%;
  }

  .fully-digitalized-event-v2 .media-block {
    width: 50%;
  }
}

@media screen and (max-width: 1024px) {
  .main-community-support .text-intro {
    margin-top: 50px;
  }

  #community-support-vector-01 {
    display: none;
  }

  .main-community-support .section-health-safety-program {
    margin-top: 80px;
  }

  .main-community-support .section-health-safety-program h3 {
    margin-bottom: 50px;
  }

  #community-support-vector-02 {
    display: none;
  }

  .main-community-support #health-safety-program-trapezoid-01 {
    transform: scaleY(-1);
  }

  .main-community-support .section-health-safety-program .gallery-row {
    width: 100%;
  }

  .main-community-support .section-health-safety-program {
    margin-bottom: 60px;
  }

  .run-for-hope .text-wrapper {
    max-width: unset;
  }

  .beneficiary-row {
    margin-top: 60px;
    margin-bottom: 70px;
  }

  .beneficiary-row .media-block {
    width: 27.4vw;
  }

  .beneficiary-row .text-block {
    width: 56.8vw;
  }

  .beneficiary-data .beneficiary-item {
    padding: 20px 30px;
  }

  .beneficiary-data .beneficiary-item .counter {
    font-size: 46px;
  }

  .run-for-hope-content {
    gap: 40px;
  }

  .fully-digitalized-event, .fully-digitalized-event-v2 {
    gap: unset;
    row-gap: 30px;
  }

  .fully-digitalized-event .media-block {
    width: 46.6%;
  }

  .fully-digitalized-event .text-block {
    width: 49.67%;
  }

  .fully-digitalized-event-v2 .media-block {
    width: 52.2%;
  }

  .fully-digitalized-event-v2 .text-block {
    width: 44.3%;
  }

  #other-charity-run-vector {
    display: none;
  }

  .section-other-charity-run .gallery-row {
    max-width: 95%;
    margin-top: 20px;
    gap: 20px 10px;
    grid-template-columns: repeat(3, 1fr);
  }

  .section-critical-development .trapezoid {
    width: 112%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .fully-digitalized-event .media-block .gallery-row,
  .fully-digitalized-event-v2 .media-block .gallery-row {
    display: flex;
    margin-top: 10px;
    padding-left: 65px;
  }
}

@media screen and (max-width: 768px) {
  .main-community-support .section-health-safety-program .position-relative:has(.trapezoid) .text-wrapper {
    padding-top: 50px;
    padding-bottom: 110px;
  }

  .main-community-support .section-health-safety-program {
    margin-bottom: 100px;
  }

  .main-community-support .section-health-safety-program .gallery-row {
    gap: 20px;
  }

    

  .section-health-safety-program .gallery-row .gallery-item {
    width: calc(90% / 2 - 10px);
  }

  #run-for-hope-banner {
    position: unset;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30vw;
  }

  .run-for-hope {
    margin-top: 50px;
  }

  .beneficiary-row {
    flex-direction: column;
    gap: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .beneficiary-row .media-block {
    width: 70%;
  }

  .beneficiary-row .text-block {
    width: 100%;
  }

  .beneficiary-row .beneficiary-title {
    margin-bottom: 30px;
  }

  .beneficiary-row .beneficiary-title h3 {
    margin-top: unset;
  }

  .beneficiary-row .beneficiary-title img {
    width: 35%;
  }

  .beneficiary-data .beneficiary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .beneficiary-data .beneficiary-item {
    padding: 35px 32px;
  }

  .fully-digitalized-event, .fully-digitalized-event-v2 {
    flex-direction: column;
    gap: 30px;
  }

  .fully-digitalized-event .media-block,
  .fully-digitalized-event-v2 .media-block,
  .fully-digitalized-event .text-block,
  .fully-digitalized-event-v2 .text-block {
    width: 100%;
  }

  .section-critical-development .text-wrapper {
    padding-top: var(--trapezoid-padding-extend);
    padding-bottom: var(--trapezoid-padding-vertical);
    padding-left: 30px;
    padding-right: 30px;
    gap: 30px;
  }

  .section-other-charity-run {
    padding-left: 30px;
    padding-right: 30px;
  }

  .section-other-charity-run .swiper {
    margin-top: 20px;
  }

  .section-other-charity-run .gallery-row {
    display: none;
  }

  .gallery-swiper  {
    display: block;
  }
}

/* ==================================== */
/* ========== END of Community Support ============ */
/* ==================================== */

/* ========= Be a Good Neighbour =========== */
.main-be-a-good-neighbour .about-alliance-intro .text-wrapper {
  margin-bottom: -100px;
}
.section-pollution-control {
  margin-top: 150px;
}

.section-pollution-control .trapezoid {
  width: 99%;
}

.section-pollution-control .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-pollution-control .columns-4 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 80px;
  margin-bottom: 100px;
}

.section-pollution-control .columns-4 .column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.section-pollution-control .columns-4 svg {
  width: 75px;
  aspect-ratio: 1 / 1;
}

.section-pollution-control .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;

}

.section-pollution-control .text-media-row .text-block {
  flex: 1;
}

.section-pollution-control .text-media-row .media-block {
  width: 30.44%;
}

.section-driving-safety {
  margin-block: var(--trapezoid-padding-vertical);
}

.section-driving-safety h3 {
  margin-bottom: 40px;
}

.section-driving-safety .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
}

.section-driving-safety .text-media-row .text-block {
  flex: 1;
}

.section-driving-safety .text-media-row .media-block {
  width: 45%;
}

.section-concrete-spillage-prevention .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
}

.section-concrete-spillage-prevention {
  overflow: hidden;
}

.section-concrete-spillage-prevention .trapezoid {
  width: 110%;
}

.section-concrete-spillage-prevention h3 {
  margin-bottom: 50px;
}

.section-concrete-spillage-prevention .text-media-row:first-of-type {
  margin-top: 115px;
}

.section-concrete-spillage-prevention .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
}

.section-concrete-spillage-prevention .text-media-row:not(:first-of-type) {
  margin-top: 50px;
}

.section-concrete-spillage-prevention .text-media-row .media-block {
  width: 55.8%;
}

.section-concrete-spillage-prevention .text-media-row .text-block {
  flex: 1;
  padding-top: 20px;
}

.section-sweeper-truck {
  /* background-color: #FBEAD2; */
  background-image: url('../images/be-a-good-neighbour/orange-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}

.section-sweeper-truck .text-wrapper {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-sweeper-truck .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 100px;
  margin-top: 50px;
}

.section-sweeper-truck .text-media-row .media-block {
  width: 38.56%;
}

.section-sweeper-truck .text-media-row .text-block {
  flex: 1;
  max-width: 48%;
}

@media screen and (min-width: 1025px) {
  .section-pollution-control .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 67% 100%, 0% 100%);
  }

  .section-pollution-control .trapezoid::after {
    clip-path: polygon(0 0, 98.9% 0, 65.9% 100%, 0% 100%);
  }

  .section-concrete-spillage-prevention .trapezoid::before {
    clip-path: polygon(0 0, 100% 0, 64% 100%, 0% 100%);
  }

  .section-concrete-spillage-prevention .trapezoid::after {
    clip-path: polygon(0 0, 98.9% 0, 62.9% 100%, 0% 100%);
  }
}

@media screen and (max-width: 2200px) {
  .section-pollution-control .columns-4 {
    margin-top: 60px;
    margin-bottom: 70px;
  }

  .section-pollution-control .columns-4 .column {
    gap: 16px;
  }

  .section-pollution-control .columns-4 svg {
    width: 55px;
    height: 55px;
  }

  .section-driving-safety h3 {
    margin-bottom: 30px;
  }

  .section-concrete-spillage-prevention .text-wrapper,
  .section-sweeper-truck .text-wrapper {
    padding-block: var(--trapezoid-padding-vertical);
  }

  .section-concrete-spillage-prevention h3 {
    margin-bottom: 35px;
  }

  .section-concrete-spillage-prevention .text-media-row:first-of-type {
    margin-top: 90px;
  }

  .section-concrete-spillage-prevention .text-media-row:not(:first-of-type) {
    margin-top: 30px;
  }

  .section-concrete-spillage-prevention .text-media-row .text-block {
    padding-top: 16px;
  }

  .section-sweeper-truck .text-media-row {
    margin-top: 40px;
    gap: 70px;
  }

  .section-sweeper-truck {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 1700px) {
  .main-be-a-good-neighbour .about-alliance-intro .text-wrapper {
    margin-bottom: -100px;
  }
}

@media screen and (max-width: 1400px) {
  .section-pollution-control {
    margin-top: 200px;
  }

  .section-pollution-control {
    overflow: hidden;
  }

  .section-pollution-control .trapezoid {
    width: 115%;
  }

  .section-concrete-spillage-prevention .trapezoid {
    width: 130%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .main-be-a-good-neighbour .about-alliance-intro h5 {
    width: 50%;
    margin-left: auto;
  }
}

@media screen and (max-width: 1024px) {
  

  .section-pollution-control .trapezoid {
    width: 110%;
  }

  .section-concrete-spillage-prevention .trapezoid {
    width: 110%;
  }

  .section-pollution-control .text-media-row,
  .section-driving-safety .text-media-row {
    gap: 40px;
  }

  .section-concrete-spillage-prevention .text-media-row:first-of-type {
    margin-top: 70px;
  }

  .section-sweeper-truck .text-media-row {
    margin-top: 40px;
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .main-be-a-good-neighbour .about-alliance-intro .text-wrapper {
    padding-top: 40px;
    margin-bottom: unset;
  }

  .section-pollution-control {
    margin-top: 50px;
  }

  .section-pollution-control .text-wrapper {
    padding: 110px 30px 50px;
  }

  .section-pollution-control .columns-4 {
    margin-top: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    row-gap: 30px;
  }

  .section-pollution-control .columns-4 .column {
    width: 50%;
  }

  .section-pollution-control .columns-4 svg {
    width: clamp(40px, 11vw, 55px);
    height: clamp(40px, 11vw, 55px);
  }

  .section-pollution-control .text-media-row,
  .section-driving-safety .text-media-row,
  .section-concrete-spillage-prevention .text-media-row {
    flex-direction: column;
  }

  .section-pollution-control .text-media-row .media-block,
  .section-driving-safety .text-media-row .media-block,
  .section-concrete-spillage-prevention .text-media-row .media-block {
    width: 100%;
  }

  .section-driving-safety h3,
  .section-concrete-spillage-prevention h3 {
    margin-bottom: 20px;
  }

  .section-concrete-spillage-prevention .text-wrapper {
    padding-top: var(--trapezoid-padding-extend);
    padding-bottom: var(--trapezoid-padding-vertical);
    padding-left: 30px;
    padding-right: 30px;
  }

  .section-concrete-spillage-prevention .text-media-row:first-of-type {
    margin-top: 50px;
  }

  .section-concrete-spillage-prevention .text-media-row:not(:first-of-type) {
    margin-top: 40px;
  }

  .section-concrete-spillage-prevention .text-media-row {
    gap: 20px;
  }

  .section-concrete-spillage-prevention .text-media-row .text-block {
    padding-top: unset;
  }

  .section-sweeper-truck {
    margin-bottom: 50px;
  }

  .section-sweeper-truck .text-wrapper {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section-sweeper-truck .text-media-row {
    margin-top: 30px;
    flex-direction: column;
    gap: 30px;
  }

  .section-sweeper-truck .text-media-row .media-block {
    width: 100%;
  }

  .section-sweeper-truck .text-media-row .text-block {
    max-width: unset;
  }
}
/* ==================================== */
/* ========== END of Be a Good Neighbour ============ */
/* ==================================== */

/* ========= Community Engagement =========== */
.main-community-engagement .about-alliance-intro h3 {
  margin-bottom: 30px;
}

.section-sustainability-reporting {
  margin-top: 100px;
}
.section-sustainability-reporting .trapezoid {
  width: 87%;
}
.section-sustainability-reporting .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
  padding-top: 100px;
  padding-bottom: 100px;
} 

.section-sustainability-reporting .text-media-row .text-block {
  flex: 1;
}

.section-sustainability-reporting .text-media-row .media-block {
  width: 29.7%;
}

#community-engagement-vector-01 {
  position: absolute;
  right: 0;
  top: -12vw;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2;
}

@media screen and (max-width: 2200px) {
  .section-sustainability-reporting {
    margin-top: 80px;
  }

  .main-community-engagement .about-alliance-intro h3 {
    margin-bottom: 20px;
  }

  .section-sustainability-reporting .text-media-row {
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 40px;
  }

  #community-engagement-vector-01 {
    top: -11vw;
  }
}

@media screen and (max-width: 1700px) {
  .main-community-engagement .about-alliance-intro .text-wrapper {
    margin-bottom: -100px;
  }
}

@media screen and (max-width: 1400px) {
  .section-sustainability-reporting {
    margin-top: 150px;
  }

  .section-sustainability-reporting .trapezoid {
    width: 99%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .main-community-engagement .about-alliance-intro h3 {
    width: 50%;
    margin-left: auto;
  }
  
}

@media screen and (max-width: 768px) {
  .main-community-engagement .about-alliance-intro .text-wrapper {
    margin-bottom: unset;
  }

  .main-community-engagement .about-alliance-intro .text-wrapper {
    padding-top: 40px;
  }

  .main-community-engagement .about-alliance-intro h3 {
    margin-bottom: 10px;
  }

  .section-sustainability-reporting {
    margin-top: 50px;
  }

  .section-sustainability-reporting .text-media-row {
    padding-top: 110px;
    padding-bottom: 50px;
    padding-left: 30px;
    padding-right: 30px;
    flex-direction: column;
  }

  .section-sustainability-reporting .text-media-row .media-block {
    width: 100%;
  }

  #community-engagement-vector-01 {
    display: none;
  }
}
/* ==================================== */
/* ========== END of Community Engagement ============ */
/* ==================================== */

/* ========= The Way we work =========== */
.about-alliance-intro.innovation-intro .text-wrapper {
  margin-bottom: unset;
}
.innovation-intro h3 {
  margin-bottom: 30px;
}

.innovation-trapezoid-list {
  margin-top: 100px;
  position: relative;
}

.innovation-trapezoid-list .trapezoid {
  width: 89%;
}

.innovation-trapezoid-list > .container > h3 {
  margin-bottom: 50px;
}

.innovation-trapezoid-list .innovation-text-media-row,
.innovation-trapezoid-list .text-wrapper {
  padding-top: var(--trapezoid-padding-vertical);
  padding-bottom: var(--trapezoid-padding-vertical);
}

.innovation-trapezoid-list .innovation-text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 50px;
}

.innovation-trapezoid-list .innovation-text-media-row .text-block {
  flex: 1;
}

.innovation-trapezoid-list .innovation-text-media-row .media-block {
  width: 30.44%;
}

.innovation-trapezoid-list .innovation-text-media-row h3,
.innovation-trapezoid-list .text-wrapper h3 {
  margin-bottom: 40px;
  width: 100%;
}

#innovation-trapezoid-list-vector-01 {
  position: absolute;
  right: 0;
  top: -12vw;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2;
}

#innovation-trapezoid-list-vector-02 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

@media screen and (max-width: 2200px) {

  .about-alliance-intro.innovation-intro {
    margin-bottom: 70px;
  }

  .innovation-intro h3 {
    margin-bottom: 20px;
  }

  .innovation-trapezoid-list {
    margin-top: 70px;
  }

  .innovation-trapezoid-list > .container > h3 {
    margin-bottom: 40px;
  }

  .innovation-trapezoid-list .innovation-text-media-row {
    gap: 0 40px;
  }

  #innovation-trapezoid-list-vector-01 {
    top: -9vw;
  }

  .innovation-trapezoid-list .innovation-text-media-row h3, .innovation-trapezoid-list .text-wrapper h3 {
    margin-bottom: 30px;
  }

}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .about-alliance-intro.innovation-intro h3 {
    width: 50%;
    margin-left: auto;
  }
}

@media screen and (max-width: 1400px) {
  .innovation-trapezoid-list .trapezoid {
    width: 99%;
  }
}

@media screen and (max-width: 1024px) {
  .innovation-trapezoid-list .innovation-text-media-row {
    gap: 0 30px;
  }

  #innovation-trapezoid-list-vector-01,
  #innovation-trapezoid-list-vector-02 {
    width: 20vw;
  }
}

@media screen and (max-width: 768px) {
  .about-alliance-intro.innovation-intro .text-wrapper {
    padding-top: 40px;
  }

  .innovation-trapezoid-list {
    margin-top: 50px;
  }

  #innovation-trapezoid-list-vector-01,
  #innovation-trapezoid-list-vector-02 {
    display: none;
  }

  .innovation-trapezoid-list > .container > h3 {
    margin-bottom: 30px;
  }

  .innovation-trapezoid-list .innovation-text-media-row {
    flex-direction: column;
    gap: 40px;
  }

  .innovation-trapezoid-list .position-relative:has(.trapezoid) .text-wrapper,
  .innovation-trapezoid-list .position-relative:has(.trapezoid) .innovation-text-media-row
  {
    padding-top: var(--trapezoid-padding-extend);
    padding-bottom: var(--trapezoid-padding-vertical);
    padding-left: 30px;
    padding-right: 30px;
  }

  .innovation-trapezoid-list .innovation-text-media-row .media-block {
    width: 100%;
  }

  .innovation-trapezoid-list .innovation-text-media-row h3 {
    margin-bottom: -20px;
  }

  .innovation-trapezoid-list .text-wrapper h3 {
    margin-bottom: 20px;
  }
}

.section-digital-innovation {
  padding-top: 100px;
  padding-bottom: 100px;
  background-image: url('../images/the-services-we-offer/digital-innovation-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


.section-digital-innovation .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 26px;
  margin-top: 100px;
  max-width: 94%;
}

.section-digital-innovation .text-media-row .text-block {
  flex: 1;
}

.section-digital-innovation .text-media-row .media-block {
  width: 47.99%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-end;
}

.section-digital-innovation .text-media-row .media-block img:last-of-type {
  width: 91.5%;
  height: auto;
}

#legacy-img {
  margin-top: -100px;
}

@media screen and (max-width: 2200px) {
  .section-digital-innovation {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-digital-innovation .text-media-row {
    margin-top: 70px;
  }

  #legacy-img {
    margin-top: -75px;
  }
}

@media screen and (max-width: 1400px) {
  .section-digital-innovation .text-media-row {
    max-width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  #legacy-img {
    margin-top: unset;
  }
}

@media screen and (max-width: 768px) {
  .section-digital-innovation {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section-digital-innovation .text-media-row {
    flex-direction: column;
    margin-top: 40px;
    gap: 40px;
  }

  .section-digital-innovation .text-media-row .media-block {
    width: 100%;
    align-items: center;
  }

  .section-digital-innovation .text-media-row .media-block img:first-of-type {
    width: 100%;
  }
}


.main-culture-we-live .innovation-trapezoid-list {
  margin-bottom: 100px;
}

@media screen and (max-width: 2200px) {
  .main-culture-we-live .innovation-trapezoid-list {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 768px) {
  .main-culture-we-live .innovation-trapezoid-list {
    margin-bottom: 50px;
  }
}

/* ==================================== */
/* ========== END of The Way we work  ============ */
/* ==================================== */

/* ========= Transition to a Low Carbon Economy =========== */
.resources-intro .container {
  flex-wrap: wrap;
}

.resources-intro h3 {
  margin-bottom: 30px;
}

.resources-intro .text-wrapper {
  margin-top: 170px;
  margin-bottom: 30px;
}

.main-transition-to-a-low-carbon-economy .innovation-trapezoid-list {
  margin-top: 270px;
}

.innovation-trapezoid-list .gallery-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.innovation-trapezoid-list .gallery-row .gallery-item {
  width: calc(90% / 3 - (20px * 2 / 3));
}

.innovation-trapezoid-list .gallery-row .gallery-item img {
  display: block;
}

@media screen and (min-width: 1201px) {
  .innovation-trapezoid-list .gallery-row:has(> .gallery-item:nth-child(2):nth-last-child(1)) .gallery-item {
    width: calc(40% - 20px*1/2);
  }
}

.section-procurement-guideline {
  background-color: #F7FFE2;
  background-image: url('../images/transition-to-a-low-carbon-economy/procurement-guideline-bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  padding-bottom: 379px;
}

.section-procurement-guideline .text-wrapper {
  padding-block: var(--trapezoid-padding-vertical);
  max-width: 60.9vw;
}

.section-procurement-guideline .text-media-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 100px;
  margin-top: 100px;
}

.section-procurement-guideline .text-media-row.reverse {
  flex-direction: row-reverse;
}

.section-procurement-guideline .text-media-row .text-block {
  flex: 1;
}

.section-procurement-guideline .text-media-row .media-block {
  width: 41.02%;
}

.section-procurement-guideline ol {
  padding-left: 20px;
}

#resources-ash-img {
  display: block;
  float: right;
  max-width: 36.46%;
}

#low-carbon-economy-vector-01 {
  position: absolute;
  right: 0;
  top: -5.3vw;
  width: 30.8vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -3;
  left: unset !important;
}

#low-carbon-economy-vector-02 {
  position: absolute;
  right: 0;
  top: -13.59vw;
  width: 32vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#low-carbon-economy-vector-03 {
  position: absolute;
  right: 0;
  top: -13.3vw;
  width: 32vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

#low-carbon-economy-vector-04 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.main-transition-to-a-low-carbon-economy .trapezoid {
  z-index: -2;
}

.main-transition-to-a-low-carbon-economy .innovation-trapezoid-list .trapezoid {
  width: 95%;
}

@media screen and (max-width: 2200px) {
  .resources-intro .text-wrapper {
    margin-top: 130px;
  }

  .resources-intro h3 {
    margin-bottom: 20px;
  }

  .innovation-trapezoid-list .gallery-row {
    margin-top: 16px;
  }

  .section-procurement-guideline .text-media-row {
    margin-top: 70px;
    gap: 80px;
  }

  .section-procurement-guideline {
    padding-bottom: 16vw;
  }
}

@media screen and (max-width: 1700px) {
  .resources-intro .text-wrapper {
    margin-top: clamp(40px, 7vw, 120px);
  }

  .main-transition-to-a-low-carbon-economy .innovation-trapezoid-list {
    margin-top: 330px;
  }

  .section-procurement-guideline .text-wrapper {
    max-width: 95%;
  }
}

@media screen and (max-width: 1400px) {
  #low-carbon-economy-vector-02,
  #low-carbon-economy-vector-03,
  #low-carbon-economy-vector-04 {
    width: 26vw;
  }

  .main-transition-to-a-low-carbon-economy .innovation-trapezoid-list .trapezoid {
    width: 99%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .resources-intro h3 {
    width: 50%;
    margin-left: auto;
  }
}

@media screen and (max-width: 1200px) {
  .resources-intro .text-wrapper {
    margin-top: 0;
  }

  .main-transition-to-a-low-carbon-economy .innovation-trapezoid-list {
    margin-top: 100px;
  }

  .section-procurement-guideline .text-media-row {
    gap: 50px;
  }
}

@media screen and (max-width: 1024px) {
  #low-carbon-economy-vector-01,
  #low-carbon-economy-vector-02,
  #low-carbon-economy-vector-03,
  #low-carbon-economy-vector-04 {
    display: none;
  }

  .main-transition-to-a-low-carbon-economy {
    overflow-x: hidden;
  }

  .main-transition-to-a-low-carbon-economy .innovation-trapezoid-list {
    margin-top: var(--trapezoid-padding-vertical);
  }

  .main-transition-to-a-low-carbon-economy .innovation-trapezoid-list .trapezoid {
    width: 107%;
  }

  .resources-intro .text-wrapper {
    padding-top: 40px;
  }

  .section-procurement-guideline .text-wrapper {
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .innovation-trapezoid-list .gallery-row {
    gap: 10px;
    flex-wrap: wrap;
  }

  .innovation-trapezoid-list .gallery-row .gallery-item {
    width: calc(100% / 2 - (10px / 2));
  }

  .section-procurement-guideline .text-media-row {
    margin-top: 50px;
    gap: 40px;
    flex-direction: column-reverse;
  }

  .section-procurement-guideline .text-media-row.reverse {
    flex-direction: column-reverse;
  }

  .section-procurement-guideline .text-media-row .media-block {
    width: 100%;
  }

  #resources-ash-img {
    float: unset;
    max-width: 100%;
  }

  .resources-intro > .container > p {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==================================== */
/* ========== END of Transition to a Low Carbon Economy  ============ */
/* ==================================== */

/* ========= Enabling Circular Economy =========== */
.section-diverse-development {
  padding-block: var(--trapezoid-padding-vertical);
  background-color: #DDF0FA;
  background-image: url('../images/enabling-circular-economy/diverse-development-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;

}

.section-diverse-development h3 {
  margin-bottom: 50px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: var(--trapezoid-padding-vertical);
}

.card-grid .card {
  border: 2px solid;
  border-image-source: linear-gradient(90deg, #CEE7D6 0%, #CCDEE6 100%);
  box-shadow: 0px 0px 15px 0px #000F7026;
  background: linear-gradient(120deg, #FEFFFF 59%, #F5FBFA 50%);
  padding: 60px 63px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-grid .card img {
  display: block;
}

#resources-conservation-vector {
  position: absolute;
  right: 0;
  top: 0;
  width: 32.5vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -2;
}

#delivery-media {
  width: 37%;
}

#enabling-circular-economy-vector-02 {
  position: absolute;
  right: 0;
  top: -7vw;
  width: 32vw;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.main-enabling-circular-economy .trapezoid {
  z-index: -2;
  width: 87.7%;
}


@media screen and (max-width: 2200px) {
  .section-diverse-development h3 {
    margin-bottom: 40px;
  }

  .card-grid {
    gap: 30px;
  }

  .card-grid .card {
    padding: 40px 43px;
    gap: 5px;
  }

  #resources-conservation-vector {
    width: 31vw;
  }
}

@media screen and (max-width: 1700px) {
  .main-enabling-circular-economy .innovation-trapezoid-list {
    margin-top: 150px;
  }

  .card-grid .card {
    padding: clamp(30px, 2.5vw, 40px);
  }

  #resources-conservation-vector {
    width: 28vw;
  }
}

@media screen and (max-width: 1400px) {
  #resources-conservation-vector {
    width: 21vw;
  }

  .main-enabling-circular-economy .trapezoid {
    width: 99%;
  }
}

@media screen and (max-width: 1200px) {
  .main-enabling-circular-economy {
    overflow-x: hidden;
  }

  .main-enabling-circular-economy .innovation-trapezoid-list {
    margin-top: unset;
  }

  #enabling-circular-economy-vector-02 {
    width: 25vw;
  }

  .card-grid {
    gap: 20px;
  }
}

@media screen and (max-width: 1024px) {
  #enabling-circular-economy-vector-02 {
    width: 18vw;
    top: -19vw;
  }

  .main-enabling-circular-economy .trapezoid {
    width: 110%;
  }

  .section-diverse-development h3 {
    margin-bottom: 30px;
  }

  .card-grid .card {
    padding: 20px;
  }

  #resources-conservation-vector {
    top: unset;
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  #delivery-media {
    width: 100%;
  }

  .card-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
  .card-grid .card {
    padding: 1rem;
  }

  #resources-conservation-vector {
    display: none;
  }

  .section-diverse-development h3 {
    margin-bottom: 20px;
  }
}


@media screen and (max-width: 500px) {
  #enabling-circular-economy-vector-02 {
    width: 30vw;
    top: -27vw;
  }

  

  
}