@media screen and (max-width: 1680px) {
  .top-header {
    padding: 0 10vw;
  }

  .content-padding {
    padding: 0 10vw;
  }

  .content-padding-2 {
    padding: 0 6vw;
  }

  .content-padding-3 {
    padding: 0 5vw;
  }

  .timeline-year-picker.scroll {
    margin: 0 10vw;
  }

  div.drop-container {
    max-width: calc(80vw / 3 - 20px);
  }

  #greenContent>.col-12:nth-child(4) {
    flex: 0 0 45%;
    max-width: 45%;
  }

  #greenContent>.col-12:nth-child(5) {
    flex: 0 0 45%;
    max-width: 45%;
  }

}

@media screen and (max-width: 1480px) {
  ul.diamond-list {
    zoom: 0.8
  }

  .top-header {
    padding: 0 7.5vw;
  }

  .content-padding {
    padding: 0 7.5vw;
  }

  .content-padding-2 {
    padding: 0 4vw;
  }

  .content-padding-3 {
    padding: 0 1vw;
  }

  .timeline-year-picker.scroll {
    margin: 0 7.5vw;
  }

  div.drop-container {
    max-width: calc(85vw / 3 - 20px);
  }
}

@media screen and (max-width: 1440px) {
  .font-35 {
      font-size: 30px !important;
  }
}

@media screen and (max-width: 1366px) {
  .font-35.esg-updates-item-text {
      font-size: 24px !important;
      line-height: 37px!important;
  }

  .esg-updates-img{
      width: 280px!important;
      height: 280px!important;
  }

  .esg-updates-logo-box img{
      width: 280px!important;
      height: 280px!important;
  }

  #esgEffect-brown::before,
  #esgEffect-green::before,
  #esgEffect-purple::before,
  #esgEffect-blue::before{
      width: 280px!important;
      height: 280px!important;
      background-size: 280px!important;
  }
}

@media screen and (max-width: 1320px) {
  .banner-swiper .overlay-block {
    max-width: 480px;
  }

  .overlay-block {
    margin-top: 10px
  }

  .content-padding-3 {
    padding: 0 8px;
  }
}

@media screen and (max-width: 1200px) {
  .content-padding {
    padding: 30px 5vw;
  }

  .content-padding-2 {
    padding: 0 3vw;
  }

  .mobile-reverse {
    flex-direction: column-reverse;
  }

  ul.diamond-list {
    zoom: 1
  }

  ul.diamond-bond {
    margin-left: 10%;
    padding: 0;
    width: 300px;
  }

  ul.diamond-bond li {
    width: 100px;
    height: 100px;
    margin: -12px;
  }


  ul.diamond-bond li.item3 {
    top: 100%;
    bottom: -100%;
    left: 0;
  }

  .awards-bond {
    min-height: 280px;
  }

  .banner-swiper .font-42 {
    font-size: 36px !important;
  }

  div.drop-container {
    max-width: calc(90vw / 3 - 20px);
  }

  .curve-bg {
    background-size: 150vw;
    padding-top: 15vw !important;
    padding-bottom: 10vw !important;
    margin-top: -15vw !important;
  }

  #greenContent > .col-12:nth-child(4){
    flex: 0 0 50%;
    max-width: 50%;
  }
  #greenContent > .col-12:nth-child(5){
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 997px) {
  .leaders-section {
    min-height: 400px;
  }

  .leader-panel {
    height: 400px;
  }

  ul.diamond-list {
    zoom: 0.8
  }

  .banner-swiper .font-42 {
    font-size: 32px !important;
  }

  .curve-bg {
    background-size: 270vw;
    padding-top: 25vw !important;
    padding-bottom: 15vw !important;
    margin-top: -25vw !important;
  }

  .font-19 {
    font-size: 14px !important;
  }
  #greenContent > .col-12:nth-child(4){
    flex: 0 0 100%;
    max-width: 100%;
  }
  #greenContent > .col-12:nth-child(5){
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .position-md-absolute {
    position: absolute !important;
  }
}

@media screen and (max-width: 767px) {
  .content-padding {
    padding: 0 2.5vw;
  }

  .content-padding-2 {
    padding: 0 1vw;
  }

  .mobile-reverse {
    flex-direction: column-reverse;
  }

  ul.diamond-list {
    zoom: 0.6;
    left: 60%;
  }

  ul.diamond-bond {
    margin-left: 20%;
  }

  ul.diamond-bond li.item3 {
    top: 100%;
    bottom: -100%;
    left: 0;
  }

  .slogan-image-container {
    max-width: 320px;
    top: calc(50% - 38.5px);
    left: calc(50% - 160px);
  }

  .banner-swiper .font-42 {
    font-size: 28px !important;
  }

  .slogan-container {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    align-items: flex-start;
    padding-top: 100px
  }

  .banner-swiper .overlay-block-section {
    flex-direction: column;
  }

  .banner-swiper .overlay-block.ml {
    margin-left: 0;
  }

  div.drop-container {
    max-width: calc(95vw / 3 - 20px);
  }

  .event-section {
    height: auto;
  }

  .event-section .event-image {
    width: 100%;
    height: auto;
    border-radius: 32px;
    margin: -10px 0;
    border: 10px solid #fff;
  }

  .curve-bg {
    background-size: 300vw;
    padding-top: 30vw !important;
    padding-bottom: 20vw !important;
    margin-top: -30vw !important;
  }
}

@media screen and (max-width: 560px) {
  .curve-bg {
    background-size: 400vw;
    padding-top: 40vw !important;
    padding-bottom: 20vw !important;
    margin-top: -40vw !important;
  }
}

@media screen and (max-width: 480px) {
  .content-padding {
    padding: 0 20px;
  }

  .content-padding-2 {
    padding: 0 20px;
  }

  ul.diamond-list {
    zoom: 0.5;
  }

  .leaders-section {
    min-height: 300px;
  }

  .leader-panel {
    height: 300px;
  }

  .fa-icon-list li {
    margin: 1em;
    margin-left: 1em;
  }

  ul.diamond-bond {
    margin-left: 35%;
  }

  .slogan-image-container {
    max-width: 160px;
    top: calc(50% - 19.25px);
    left: calc(50% - 80px);
  }

  .banner-swiper .font-42 {
    font-size: 24px !important;
  }

  .slogan-container {
    width: 100%;
  }

  .logos {
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .logos img {
    margin: 10px 0;
  }

  div.drop-container {
    max-width: 280px;
  }

  .curve-bg {
    background-image: none;
    background-color: #f5f5f5;
    background-size: unset;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-top: 0 !important;
  }
}