.text-show{display:block !important;}
.text-light{color:#fff !important;}
a.text-dark{color: #404040 !important; border-bottom: 1px solid #404040;}
[id*="custom-html"]{padding:0 !important; position:relative;}
.top-header-canvas {position:relative; height:500px; overflow:hidden; background:#efefef;}
.top-header-canvas .banner-title{width: 50%; top: 50%; transform: translate(0, -50%); position: absolute;z-index:1; color:#fff;}
#top-hero{position: relative; padding: 0;}
#top-hero h1{display: none;}
#top-hero .row {height: 500px; align-items: center;}
.bg-mild-blue{background: #66D1FF;}
.bg-blue{background: #00b2ff;}
.bold {font-weight: 500;}
.small-text{font-size: 15px !important;}
.text-bold {font-weight: 500;}
.text-normal {font-weight: normal !important;}
.break-line {display: block;}
.position-relative {position: relative;}
.desktop-display{display: block;}
.mobile-display{display: none;}
#supply-chain-section .btn.color-adjusted {background-color: #fff !important; color: #003eab !important; border-color: #fff !important;}
#report-section .btn.color-adjusted {background-color: #fff !important; border-color: #fff !important; color: #003eab !important;}
#report-section .border-adjusted {color: #fff !important;}
#report-section .border-adjusted:hover {background-color: transparent!important;}
#report-section .border-adjusted::before {background-color: #fff !important;}

.text-blue{color:#0093CD;}
.text-green{color:#1E8F3A;}
.text-dark-blue{color:#0C3E88;}
.text-dark-green{color: #004A1F;}
.text-light-green{color: #1E8F3A;}
.light-blue{background:#0093CD; padding: 5px 0;}
.dark-blue{background:#0C3E88; padding: 5px 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.light-green{background:#1E8F3A; padding: 5px 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}
.border-line-dotted{border-bottom: 2px dotted #000; width: 100%;}
.border-blue{border-bottom: 1px solid #0093CD;}
.border-green{border-bottom: 1px solid #1E8F3A;}
.border-dark-green{border-bottom: 1px solid #004A1F;}

a.ecovadis-logo:before{background-color: transparent!important;}

#renewable-energy-section, #design-green-future-section, #supply-chain-section {padding: 0 !important;}
#net-zero-section h2, #commitment-section h2, #commitment-iso-section h2, #renewable-energy-section h2, #design-green-future-section h2, #supply-chain-section h2 {display: none;}
#net-zero-section .col-md-5, #commitment-section .col-md-5, #commitment-iso-section .col-md-5{width: 100%;}
#renewable-energy-section .row {min-height: 600px; align-items: center;}
#renewable-energy-section .col-md-5{width: 100%;}
#design-green-future-section .row {min-height: 600px; align-items: center;}
#design-green-future-section .col-md-5{width: 100%;}
#supply-chain-section .row {min-height: 600px; align-items: center;}
#supply-chain-section .col-md-5{width: 100%;}
.commitment-iso-content {width: 65%; margin: auto;}
#net-zero-section picture img, #commitment-section picture img, #renewable-energy-section picture img, #design-green-future-section picture img, #supply-chain-section picture img {object-fit: cover;}

.swiper {width: 100%; height: 140px;}
.swiper-slide {text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; height: 140px; overflow: hidden;}
.swiper-slide img {display: block; width: 170px; height: 140px; object-fit: cover; }
.swiper-pagination {position: relative !important; margin: 0 auto; padding-top: 1rem;}
.swiper-pagination-bullets.swiper-pagination-horizontal {top: var(--swiper-pagination-top,10px);}

.swiper-slide .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 140px; width: 170px; opacity: 0; transition: .5s ease; background-color:#00b2ff;}
.swiper-slide:hover .overlay {opacity: 1;}
.swiper-slide .text a{color: #fff;}
.swiper-slide .text a:before {background-color: transparent !important;}
.swiper-slide .text {font-size:18px; line-height: 1.2rem; color: #fff; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}

#report-section h2{display: none;}
#report-section .col-md-5 {width: 80%;}

.green-design-timeline {margin-top: 1rem;}
.recent-achieve-section .achieve-box {width: 32.6%;}
.recent-achieve-section .desc {padding: 1.5rem 2rem; color: #fff; height: 320px;}
.recent-achieve-section .numbers span.value{font-size: 100px; line-height: 1; font-family: "Galano Grotesque",Helvetica,sans-serif;}
.recent-achieve-section .numbers span.value-decimal{font-size: 100px; line-height: 1;}
.recent-achieve-section .percentage-text{font-size: 50px;}
.recent-achieve-section .small-caption {font-size: 24px; line-height: 1; margin-top: 10px;}

.gradient-darkblue{background: rgb(0,26,111); background: linear-gradient(0deg, rgba(0,26,111,1) 0%, rgba(12,62,137,1) 50%, rgba(23,116,255,1) 100%);}
.gradient-lightblue{background: rgb(0,148,206); background: rgb(0,63,98); background: linear-gradient(0deg, rgba(0,63,98,1) 0%, rgba(0,117,181,1) 50%, rgba(0,148,206,1) 100%);}
.gradient-green{background: rgb(30,144,58); background: linear-gradient(0deg, rgba(6,94,81,1) 0%, rgba(30,144,58,1) 100%);}

.tooltip {position:absolute!important; display: inline-block; border-bottom: none !important; cursor: pointer;}
.tooltip .tooltiptext {visibility: hidden; width: 350px !important; background-color: black; color: #fff; font-size: 14px !important; text-align: left !important; border-radius: 6px; padding: 5px !important; position: absolute; z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}
.pulse-anime {animation: beat .6s infinite alternate; position: absolute;}
@keyframes beat{
	to { transform: scale(1.4); }
}
.pulse-anime i {font-weight: 600; font-size: 30px;}
.low-carbon-icon{position: absolute; left: 20%; top: 0;}
.low-carbon-icon i {color: #008fca;}
.carbon-reduction-icon {position: absolute; right: 14%; top: 8%;}
.carbon-reduction-icon i{color: #1f8c39;}
.climate-change-icon {position: absolute; bottom: 24%; left: 34%;}
.climate-change-icon i{color: #004b20;}

.initiatives-logo-canvas {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@media (max-width: 1500px) {
    #net-zero-section {background-position: 30%;}
    #net-zero-section picture img {object-position: 30%;}
    #renewable-energy-section, #supply-chain-section {background-position: 70%;}
    #renewable-energy-section picture img, #supply-chain-section picture img {object-position: 70%;}
}

@media (max-width: 1100px) {
    .low-carbon-icon {position: absolute; left: 17%; top: 0;}
    .carbon-reduction-icon {position: absolute; right: 10%; top: 8%;}
    .climate-change-icon {position: absolute; bottom: 24%; left: 32%;}
}

@media (max-width: 900px) {
    .desktop-display{display: none;}
    .mobile-display{display: block;}
    .break-line {display: inline; margin-left: 5px;}
    .recent-achieve-section .numbers span.value, .recent-achieve-section .numbers span.value-decimal, .recent-achieve-section .percentage-text{font-size: 80px;}
    .recent-achieve-section .achieve-box{width: 100%; margin-bottom:1rem; margin-top: 0;}
    .recent-achieve-section .desc {padding: 1rem !important;}
}

@media (max-width: 800px) {
    #net-zero-section .text-cover {background: rgba(255,255,255,0.85);padding: 1rem;}
}

@media (max-width: 500px) {
    #ecovadis-silver-award {height: 570px;}
    #commitment-section .row {min-height: 900px;}
    #commitment-iso-section {background-size: cover;}
    #commitment-iso-section picture img {object-fit: cover;}
    .commitment-iso-content {width: 100%;}
    .green-design-canvas img {height: 40px; width: auto;}
    #report-section .zyx-paragraph__cta {align-items: start; margin: 0; width: fit-content !important;}
    .initiatives-logo-canvas div{width: 50%;}
}