.gray-section {
  margin-top: -1%;
  padding: 7.8% 0 7.3%;
  background-color: #F8F8F8;
}
.pitchdeck-remote-site {
  margin: -10% 0 0;
  padding: 0% 0 10%;
}
.box-arrow {
  width: 10%;
  padding: 1.5% 0 0;
}
.inaction, .inaction-sustainability {
  margin-top: 8%;
  margin-bottom: 12.1%;
}
.big-box, .gfootprint-text-section, .gfootprint-text{
    width: 50%;
}

/* boxes */
.box-news, .box-1{
  width: 100%;
}
.box-2{
  width: 20%;
}
.box-3{
  width: 30%;
}
.box-4{
  width: 40%;
}
.box-5{
  width: 50%;
}
.box-55 {
  width: 55%;
}
.box-6{
  width: 65%;
}
.box-7{
  width: 70%;
}
.box-8{
  width: 80%;
}
.banner-title{
  width: 100%;
  display: flex;
  gap: 2%;
}
.medium-box{
  width: 44.827%;
}


.double-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.title-button{
  width: 100%;
  display: flex;
}

.title-page-banner{
  margin-top: 1.2%;
  position: relative;
  z-index: 1000;
  margin-left: 11.2%;
}
.progressbar, .progressbar-2, .progressbar-3 {
    margin-bottom: 3.8%;
    border-bottom: 5px solid #D1D1D1;
    width: 18.51851851851852%;
    opacity: 0;
    position: absolute;
    transition: 0.3s ease-in-out;
  }
  .progressbar::after {
    content: '';
    background: #ED4F18;
    top: 4.9px;
    display: block;
    width: 35%;
    position: relative;
    height: 4.8px;
  }
  .progressbar-2::after {
    content: '';
    background: #ED4F18;
    top: 5px;
    left: 30%;
    height: 4.9px;
    display: block;
    width: 35%;
    position: relative;
  }
  .progressbar-3::after {
content: '';
    background: #ED4F18;
    top: 5px;
    left: 65%;
    height: 4.9px;
    display: block;
    width: 35%;
    position: relative;
  }

  .progressbar.active, .progressbar-2.active, .progressbar-3.active {
    opacity: 1;
  }

  .borderbar, .borderbar-2, .borderbar-3 {
    margin-top: 1.5%;
    height: 1px;
    background: #242D53;
    position: relative;
    float: right;
    width: 15%;
  }
  
  .borderbar::after {
    content: '';
    background: #ED4F18;
    position: relative;
    top: -1px;
    height: 3px;
    display: block;
    width: 40%;
  }
  
  
  .borderbar-2::after {
    content: '';
    background: #ED4F18;
    position: relative;
    top: -1px;
    height: 3px;
    display: block;
    width: 65%;
  }
  
  
  .borderbar-3::after {
    content: '';
    background: #ED4F18;
    position: relative;
    top: -1px;
    height: 3px;
    display: block;
    width: 100%;
  }
  
  .numb {
    margin-top: 5%;
  }
  
  .border-progress {
    margin-top: 2.5%;
    gap: 2%;
    justify-content: end;
    opacity: 0;
    display: flex;
    position: absolute;
    width: 100%;
    transition: 0.3s ease-in-out;
  }
  .border-progress.active {
    opacity: 1;
  }
  .border{
    margin-top: 1%;
    position: relative;
    width: 100%;
    float: right;
  }


  /* border-title */
.border-big-title{
  margin-top: 2%;
  border-top: 3px solid #ED4F18;
  width: 9.7%;
}
.border-title-left{
  align-self: center;
  border-top: 3px solid #ED4F18;
  width: 9.7%;
}
.border-title-left-faq{
  margin-top: 2%;
  border-top: 3px solid #ED4F18;
  width: 10.7%;
}
.border-title-left-button {
  align-self: center;
  border-top: 3px solid #ED4F18;
  width: 9.7%;
  margin-top: -1.2%;
}
.single-border-title-left {
  align-self: center;
  border-top: 3px solid #ED4F18;
  width: 9.7%;
}

.border-title-quotes-right {
  border-top: 3px solid #ED4F18;
  width: 22%;
  margin-left: 2%;
  margin-top: 5.5%;
}

.border-title-right{
  border-top: 3px solid #ED4F18;
  width: 21%;
  margin-left: 2%;
  margin-top: 5%;
}
.border-title-long-right{
  border-top: 3px solid #ED4F18;
  width: 21%;
  margin-top: 5%;
}
.border-title--double-right {
  border-top: 3px solid #ED4F18;
  width: 19%;
  margin-left: 3%;
  margin-top: 5%;
}

.border-single-title-banner {
  border-top: 3px solid #ED4F18;
  width: 27.1%;
  margin-left: 3%;
  align-self: center;
  margin-top: 1%;
}

.border-title-banner {
  border-top: 3px solid #ED4F18;
  width: 32.7%;
  margin-left: 3%;
  align-self: center;
  margin-top: 1%;
}

.border-title-column-right {
  margin-top: 4.5%;
  border-top: 3px solid #ED4F18;
  width: 21.7%;
  margin-left: 2%;
}

.line-facility {
  border-top: 3px solid #ED4F18;
  width: 10%;
  margin-top: 4%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.box-title-right{
  width: 67.5%;
}
.swiper-pagination-bullet {
  width: 25px;
  height: 5px;
  display: inline-block;
  background-color: #D1D1D1 !important;
  margin: 0 3px;
  border-radius: 0;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.swiper-pagination-bullet-active {
  background-color: #ED4F18 !important;
  width: 50px;
}
.swiper-new-prop-mobile, .swiper-pagination-prop, .swiper-pagination-project, .swiper-pagination-case, .re-swiper-pagination-case, .swiper-pagination-smart-box, .swiper-pagination-logo, .swiper-new-mobile, .swiper-case-prop-mobile, .swiper-new-tam-mobile, .swiper-other-mobile, .swiper-about-mobile, .swiper-pagination-waste {
  position: relative;
  text-align: center;
}
.titlesection,.titlesection-about {
    display: flex;
    gap: 2%;
  }
  .titlesection-right{
    display: flex;
    justify-content: end;
    gap: 2%;
  }


  .position {
    margin-top: 2%;
    margin-bottom: -1.5%;
  }

  /* button */
  .button{
    margin: 6% 0;
    padding: 0.6em 0em 0.6em 1em;
    display: flex;
    background-color: #ED4F18;
    color: white;
    width: 38%;
    gap: 8%;
  }
  .button img{
      align-self: center;
    width: 10%;
    height: 100%;
  }
  .btn-banner{
    margin: 6% 0;
    padding: 0.6em 0em 0.6em 1em;
    display: flex;
    background-color: #ED4F18;
    color: white;
    width: 36%;
    gap: 9.5%;
  }
  .btn-banner img{
    width: 8%;
  height: 100%;
  align-self: center;
  }
  .btn-read-article {
  margin-top: 2%;
  padding: 0.3em 0em 0.3em 0em;
  display: flex;
  color: #ED4F18;
  width: 30.8%;
  gap: 8%;

}
  .btn-read {
    margin: 4% 0 1%;
    padding: 0.3em 0em 0.3em 0em;
    display: flex;
    color: #ED4F18;
    width: 18.8%;
    gap: 8%;
  
  }
  .btn-exp-article {
    padding: 0.3em 0em 0.3em 0em;
    display: flex;
    color: #ED4F18;
    float: right;
    width: 24%;
    gap: 4%;
  }
  .btn-learn-facility {
    padding: 0.3em 0em 0.3em 0em;
    display: flex;
    color: #ED4F18;
    float: left;
    width: 35%;
    gap: 4%;
    margin-top: 15%;
  }
  .btn-watch {
    margin-top: 9%;
    padding: 0.3em 0em 0.3em 0em;
    display: flex;
    color: #ED4F18;
    width: 20.8%;
    gap: 8%;
  }

  .btn-learn-de {
margin-top: 4.5%;
  padding: 0.3em 0em 0.3em 0.7em;
  background-color: #ED4F18;
  display: flex;
  color: #ffffff;
  width: 11%;
  gap: 11%;
  }

  .btn-exp {
    margin-top: 4.5%;
    padding: 0.6em 0em 0.6em 1em;
    background-color: #ED4F18;
    display: flex;
    color: #ffffff;
    width: 23%;
    gap: 11%;
  }
  .btn-exp-food {
    margin-top: 8.5%;
    padding: 0.6em 0em 0.6em 1em;
    background-color: #ED4F18;
    display: flex;
    color: #ffffff;
    width: 27%;
    gap: 11%;
  }
  .btn-download-prop, .btn-exp-battery {
    padding: 0.6em 0em 0.6em 1em;
    background-color: #ED4F18;
    display: flex;
    color: #ffffff;
    width: 22%;
    gap: 15%;
  }
  .btn-download-mic, .btn-download {
    margin-top: 6%;
    margin-left: 71.5%;
    padding: 0.6em 0.6em 0.6em 0;
    background-color: #ED4F18;
    display: flex;
    color: #ffffff;
    width: 25%;
    gap: 8%;
    justify-content: flex-end;
  }

.btn-talk-indsutries{
  padding: 0.3em 0em 0.3em 1em;
  background-color: #ED4F18;
  display: flex;
  color: #ffffff;
  width: 22%;
  gap: 15%;
  float: right;
  margin-top: 5%;
}
  .img-1 {
    width: 55%;
  }

  .img-2 {
    width: 55%;
  }
  .img-3 {
    width: 55%;
  }

  .img-4 {
    width: 100%;
  }
  .icon {
    width: 12%;
    height: 100%;
    align-self: center;
  }
  .icon-2 {
    align-self: center;
    width: 9%;
    height: 100%;
  }
  .icon-3 {
    align-self: center;
    width: 7%;
    height: 100%;
  }
  .icon-4 {
    align-self: center;
    width: 9%;
    height: 100%;
  }

  .icon-5 {
    margin-top: 5.5%;
    margin-bottom: 2%;
    width: 12%;
    height: 50%;
  }
  .custom-nav {
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 5%;
    right: 6%;
    bottom: 42.5%;
  }

  .cta-box, .cta-box-2 {
    padding-top: 15.5%;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 100;
  }
  .cta-content {
    margin-top: -3%;
    width: 50%;
    height: auto;
  }

  .cta-arrow-em, .cta-arrow-tam, .cta-re-arrow, .cta-arrow, .cta-arrow-prop, .cta-arrow-sustain {
    width: 50%;
    height: auto;
  }
  .cta-arrow img {
    margin-top: 1.8%;
    margin-right: 1%;
    position: relative;
    width: 13%;
    float: right;
  }



  .banner-page {
    margin: 4% 0 0 0;
    position: relative;
    overflow: hidden;
  }

  .banner-block{
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 0;
    width: 50%;
    padding: 6% 0% 11% 8%;
  }
  .banner-block-template {
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 0;
    width: 50%;
    padding: 8% 0% 11% 8%;
  }

  .banner-block-template-2 {
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 0;
    width: 50%;
    padding: 7% 0% 11% 8%;
  }
  .banner-block-template-button {
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    top: 0;
    width: 50%;
    padding: 4% 0% 11% 8%;
  }

  .swiper-pagination-pitch {
    margin-top: 2%;
    position: absolute;
    bottom: 0 !important;
    text-align: center;
  }

  .swiper-pagination-case {
    margin-top: 1%;
    margin-bottom: 8%;
  }

  @media(min-width:640px) and (max-width: 1024px){
    .banner-block, .banner-block-template{
      background-color: rgba(255,255,255,0.8);
      position: absolute;
      top: 0;
      width: 50%;
      padding: 5% 0% 10% 8%;
    }
    .banner-block-template-2{
      padding: 5% 0% 6% 8%;
  }
    .button{
      width: 40%;
    }
    .single-border-title-left, .border-title-banner, .border-title--double-right, .border-title-quotes-right {
      border-top: 2px solid #ED4F18;
    }
    .border-title-banner {
      width: 34.7%;
    }
    .border-title-quotes-right {
      width: 22.9%;
    }
  }
    @media(min-width: 360px) and (max-width: 640px){
         .big-box{
            width: 100%;
        }

        /* border-title */
        .border-title-mobile-case {
          margin-top: 4%;
          margin-bottom: 3%;
          border-top: 2px solid #ED4F18;
          width: 12%;
        }
        .border-title-quotes-right {
          border-top: 2px solid #ED4F18;
          width: 14%;
          margin-left: 0%;
          margin-top: 5.5%;
          margin-bottom: 5%;
        }
        .border-title--double-right {
          border-top: 2px solid #ED4F18;
          width: 12%;
          margin-left: 0%;
          margin-top: 5%;
        }
        .banner-block-template-button,  .banner-block, .banner-block-template, .banner-block-template-2 {
          background-color: transparent;
          position: relative;
          width: 100%;
          padding: 6% 0% 11% 8%;
        }
        .title-page-banner {
          margin-top: 1.2%;
          position: relative;
          z-index: 0;
          margin-left: 0;
          width: 90%;
        }

        .btn-exp-food {
          margin-top: 8.5%;
          padding: 0.6em 0em 0.6em 1em;
          background-color: #ED4F18;
          display: flex;
          color: #ffffff;
          width: 37%;
          gap: 11%;
        }
        .btn-exp-article {
          padding: 0em 0em 0em 0em;
          width: 104%;
        }
        .icon-4 {
          margin-top: 1%;
          margin-left: 5%;
        }
    }