.sustainability {
  padding: 140px 0;
  background-repeat: no-repeat;
  background-position: left calc((100% - 1440px) / 2) bottom;
  background-size: 532px;
  background-image: url(images/bg-logo-x.svg);
}

.sustainability__wrapper {
  display: flex;
  flex-direction: column;
  gap: 93px;
}

.sustainability__topContent {
  /* max-width: 868px; */
  max-width: 100%;
  padding-left: 227.33px;
  width: 100%;
  /* margin-bottom: 93px; */
}

.sustainability__topContent h4,
.sustainability__topContent .sustainability__intro {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 30px;
  line-height: 42.25px;
  letter-spacing: 0px;
  color: var(--heading);
  text-align: justify;
}

.sustainability__topContent h4 span,
.sustainability__topContent .sustainability__intro span {
  color: var(--blue);
}

.sustainability__metrics {
  display: flex;
  gap: 64px;
}

.sustainability__metrics--left {
  padding-left: 227.33px;
}

.sustainability__subheading {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16.45px;
  line-height: 25.71px;
  text-transform: uppercase;
  color: var(--heading);
}

.sustainability__metrics--right {
  max-width: 727px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.sustainability__metric-item {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.sustainability__metric-item:not(:first-child) {
  border-top: 1px solid var(--border1);
  padding-top: 50px;
}

.sustainability__metric-item__num {
  max-width: 282px;
  width: 100%;
}

.sustainability__metric-item__text {
  max-width: calc(100% - 292px);
  width: 100%;
}

.sustainability__metric-item h2,
.sustainability__metric-item .sustainability__metric-value {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 98px;
  line-height: 107.52px;
  letter-spacing: 0px;
  color: var(--blue);
  margin: 0;
}

.sustainability__metric-value .odometer {
  transition: all ease-in-out 0.3s;
}

.sustainability__metric-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 25.71px;
  text-transform: uppercase;
  color: var(--text);
}

.sustainability__metric-desc {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16.17px;
  line-height: 21.6px;
  letter-spacing: -0.32px;
  color: var(--text);
}

/* Center Title */

.centerTitle {
  padding: 100px 0 80px;
}

.centerTitle__wrap {
  max-width: 744px;
  width: 100%;
  margin: 0 auto;
  padding-top: 16.11px;
}

.centerTitle h2 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 38px;
  line-height: 42.25px;
  letter-spacing: -0.77px;
  text-align: center;
  color: var(--heading);
}

.centerTitle h2 span {
  color: var(--blue);
}

/* ########### Responsive ############ */

/* Medium desktop (max-width: 1399px) */
@media (max-width: 1399px) {
  .sustainability {
    padding: 120px 0;
    background-size: 480px;
    /* background-position: bottom left; */
    background-position: left calc((100% - 1440px) / 2) bottom;
  }

  .sustainability__topContent {
    padding-left: 180px;
    max-width: 100%;
  }

  .sustainability__metrics--left {
    padding-left: 180px;
  }

  .sustainability__metric-item h2 {
    font-size: 90px;
    line-height: 100px;
  }

  .centerTitle {
    padding: 80px 0;
  }
}

/* XL Screens ≤ 1199px */
@media (max-width: 1199px) {
  .sustainability {
    padding: 100px 0;
    background-size: 420px;
  }

  .sustainability__topContent {
    padding-left: 100px;
  }

  .sustainability__metrics--left {
    padding-left: 100px;
  }

  .sustainability__metric-item h2 {
    font-size: 80px;
    line-height: 88px;
  }
}

/* LG Screens ≤ 991px (Tablets) */
@media (max-width: 991px) {
  .sustainability {
    padding: 80px 0;
    background-size: 320px;
  }

  .sustainability__wrapper {
    gap: 70px;
  }

  .sustainability__metrics {
    flex-direction: column !important;
    gap: 40px;
  }

  .sustainability__topContent,
  .sustainability__metrics--left {
    padding-left: 0;
  }

  .sustainability__topContent h4,
  .sustainability__topContent .sustainability__intro h4 {
    font-size: 24px;
    line-height: 32px;
  }

  .sustainability__metrics--right {
    max-width: 100%;
    gap: 30px;
  }

  .sustainability__subheading,
  .sustainability__metrics--left h6 {
    font-size: 14px;
    line-height: 20px;
  }

  .sustainability__metric-item__text p {
    font-size: 15px;
    line-height: 22px;
  }

  .sustainability__metric-item h2,
  .sustainability__metric-item .sustainability__metric-value {
    font-size: 64px;
    line-height: 72px;
  }

  .centerTitle {
    padding: 50px 0;
  }
}

/* MD Screens ≤ 767px (Mobiles) */
@media (max-width: 767px) {
  .sustainability {
    padding: 60px 0;
    background-size: 220px;
    background-position: bottom left;
  }

  .sustainability__wrapper {
    gap: 50px;
  }

  .sustainability__topContent h4, .sustainability__topContent .sustainability__intro h4 {
    font-size: 22px;
    line-height: 30px;
    text-align: left;
  }

  .sustainability__metrics {
    gap: 20px;
  }

  .sustainability__metric-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-top: 0;
  }

  .sustainability__metric-item:not(:first-child) {
    padding-top: 30px;
  }

  .sustainability__metric-item__num,
  .sustainability__metric-item__text {
    max-width: 100%;
  }

  .sustainability__metric-item h2, .sustainability__metric-item .sustainability__metric-value {
    font-size: 46px;
    line-height: 54px;
  }

  .sustainability__metric-label {
    font-size: 12px;
    line-height: 20px;
  }

  .sustainability__metric-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .centerTitle {
    padding: 40px 0 40px;
  }

  .centerTitle h2 {
    font-size: 26px;
    line-height: 32px;
  }
}

/* XS Screens ≤ 480px (Small Mobiles) */
@media (max-width: 480px) {
  .sustainability {
    padding: 40px 0;
    background-size: 160px;
  }

  .sustainability__topContent h4, .sustainability__topContent .sustainability__intro h4 {
    font-size: 20px;
    line-height: 28px;
  }

  .sustainability__metric-item {
    gap: 10px;
  }

  .sustainability__metric-desc {
    font-size: 13px;
    line-height: 20px;
  }

  .sustainability__metric-item__text p {
    font-size: 14px;
  }

  .centerTitle h2 {
    font-size: 22px;
    line-height: 28px;
  }
}