@layer base {
    #breadcrumb.sustainability-breadcrumb {
        @apply flex-wrap rounded-none xl:flex-nowrap xl:rounded-full xl:px-4;
    }

    .sustainability-header-section {
        @apply h-[calc(100svh-45px)] sm:h-[calc(65svh)] lg:h-[calc(100svh-45px)] xl:h-[calc(100svh-60px)] flex relative bg-center bg-cover bg-no-repeat;
    }

    .sustainability-header-section .sustainability-header-section-overlay {
        @apply w-full bg-tlx-dark-blue-50-opacity max-w-[unset] relative;
    }

    .sustainability-header-section .sustainability-header-content-outer {
        @apply flex-container max-content-width mx-auto h-full items-center sm:items-start xl:items-center justify-end sm:justify-center xl:justify-start sm:px-24 xl:px-52;
    }

    .sustainability-header-section .sustainability-header-content-inner {
        @apply max-w-[375px] flex flex-col pt-16 sm:pt-0 pb-8 sm:pb-0 items-center sm:items-start justify-end sm:justify-start;
    }

    .sustainability-header-section .sustainability-header-content-inner h1 {
        @apply text-center sm:text-left text-white;
    }

    .sustainability-header-section .sustainability-header-content-inner h4 {
        @apply text-white text-center sm:text-left pb-2;
    }

    .sustainability-header-section .sustainability-header-scroll-btn {
        @apply h-12 w-12 flex justify-center items-center border-2 border-white rounded-full absolute bottom-8 xl:bottom-16 backdrop-blur-sm cursor-pointer;
    }

    .sustainability-header-section .sustainability-header-scroll-btn img {
        @apply w-5;
    }

    .sustainability-feature-section {
        @apply w-full max-content-width px-4 2xl:px-0 py-20 flex flex-col xl:flex-row xl:gap-20;
    }

    .sustainability-feature-section .feature-video-wrapper {
        @apply xl:w-7/12 mb-4 flex flex-col items-end;
    }

    .sustainability-feature-section .feature-video-wrapper .feature-video {
        @apply w-full;
    }

    .sustainability-feature-section .feature-text-wrapper {
        @apply xl:w-4/12 xl:mr-20;
    }

    .sustainability-feature-section.flex-row-reverse .feature-text-wrapper {
        @apply xl:mr-0 xl:ml-20;
    }

    .sustainability-feature-section .feature-text-wrapper h3 {
        @apply xl:w-4/5 xl:pb-2;
    }

    .sustainability-banner {
        @apply h-40 sm:h-56 xl:h-[350px] w-full rounded-xl xl:rounded-3xl bg-cover bg-center bg-no-repeat;
    }

    .sustainability-2-col-section {
        @apply max-content-width px-4 2xl:px-0 py-10 flex flex-col lg:flex-row lg:items-center gap-4;
    }

    .sustainability-2-col-section {
        @apply lg:gap-24 xl:gap-32;
    }

    .sustainability-2-col-section > img {
        @apply xl:h-[500px] lg:w-6/12 rounded-2xl xl:rounded-3xl object-cover object-center;
    }

    .sustainability-2-col-section .zoom-overlay > span {
        @apply font-semibold text-xl text-white;
    }

    .sustainability-2-col-text {
        @apply w-full lg:w-4/12 lg:mr-24 xl:mr-32;
    }

    .sustainability-2-col-section.flex-row-reverse .sustainability-2-col-text {
        @apply mr-0 lg:ml-20 xl:ml-32;
    }

    .sustainability-text-section {
        @apply max-content-width w-full py-20 px-4 2xl:px-0 flex flex-col items-center;
    }

    .sustainability-text-section h2,
    .sustainability-text-section h3 {
        @apply lg:max-w-[750px] pb-6 text-center;
    }

    .sustainability-text-section h5 {
        @apply lg:max-w-[750px] my-2 text-center leading-6;
    }

    .sustainability-text-section p {
        @apply lg:max-w-[750px] m-0 pb-2 text-center;
    }

    .sustainability-text-section .horizontal-divider-sm {
        @apply w-20 mb-2 border-b-2 border-tlx-dark-blue;
    }

    #embodied-carbon-journey-cards .swiper-slide,
    #recycling-process-journey-cards .swiper-slide {
        @apply w-[calc(100%-5rem)] sm:w-[370px] h-[480px] flex bg-center bg-cover bg-no-repeat rounded-2xl xl:rounded-3xl;
    }

    #recycling-process-journey-cards .swiper-slide {
        @apply cursor-default;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-overlay,
    #recycling-process-journey-cards .slide-overlay-card-overlay {
        @apply w-full bg-[rgba(11,27,48,0.35)] flex flex-col justify-end rounded-2xl xl:rounded-3xl overflow-hidden;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-head {
        @apply h-1/5 w-full p-4 flex items-start justify-center bg-tlx-dark-blue-80-opacity xl:bg-transparent transition-all duration-500;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-head h5 {
        @apply mt-2 text-white text-center;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-body,
    #recycling-process-journey-cards .slide-overlay-card-body {
        @apply h-3/5 slg:h-0 px-4 flex flex-col gap-4 items-center bg-tlx-dark-blue-80-opacity xl:bg-transparent transition-all duration-500;
    }

    #recycling-process-journey-cards .slide-overlay-card-body {
        @apply slg:h-3/5 px-4 py-10 slg:py-8 bg-tlx-dark-blue-80-opacity;
    }

    #embodied-carbon-journey-cards .swiper-slide:hover .slide-overlay-card-head,
    #embodied-carbon-journey-cards .swiper-slide:hover .slide-overlay-card-body {
        @apply bg-tlx-dark-blue-80-opacity;
    }

    #embodied-carbon-journey-cards .swiper-slide:hover .slide-overlay-card-body {
        @apply h-[60%];
    }

    #embodied-carbon-journey-cards .slide-overlay-card-body div,
    #recycling-process-journey-cards .slide-overlay-card-body div {
        @apply flex flex-col items-center;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-body div h5 {
        @apply text-center text-tlx-blue font-bold leading-none;
    }

    #embodied-carbon-journey-cards .slide-overlay-card-body > div span {
        @apply text-lg text-center text-white;
    }

    #design-principles-swiper .swiper-slide {
        @apply w-[200px] h-64 xl:h-72 p-6 flex flex-col gap-6 rounded-xl xl:rounded-3xl bg-tlx-light-grey;
    }

    #design-principles-swiper .swiper-slide img {
        @apply h-14 w-14;
    }

    #design-principles-swiper .swiper-slide h6 {
        @apply m-0 text-tlx-dark-blue;
    }

    .spv-box {
        @apply h-[264px] xl:h-[364px] w-[264px] xl:w-[364px] p-8 flex flex-col items-center justify-end rounded-3xl xl:rounded-[40px] rounded-tl-[64px] xl:rounded-tl-[98px] rounded-br-[64px] xl:rounded-br-[98px] bg-white;
    }

    .spv-box .spv-data {
        @apply p-2 text-4xl xl:text-5xl font-bold text-tlx-dark-blue;
    }

    .spv-box .spv-unit {
        @apply text-xl font-bold text-tlx-dark-blue-50-opacity;
    }

    .spv-box .spv-description {
        @apply h-10 mt-8 xl:mt-16 px-4 text-sm xl:text-base text-center font-bold;
    }

    .retrofit-thumbnail {
        @apply !h-[275px] xl:!h-[448px] w-full !flex items-end rounded-xl xl:rounded-3xl bg-cover bg-center bg-no-repeat;
    }

    .retrofit-thumbnail .retrofit-thumbnail-overlay {
        @apply
        bg-tlx-dark-blue-50-opacity
        duration-500
        ease-in-out
        flex
        h-full
        items-start
        justify-center
        rounded-b-xl
        rounded-t-xl
        text-center
        text-white
        transition-all
        w-full
        xl:h-24
        xl:rounded-b-3xl
        xl:rounded-t-none;
    }

    .retrofit-thumbnail:hover .retrofit-thumbnail-overlay {
        @apply xl:h-full items-center rounded-t-xl xl:rounded-t-3xl;
    }

    .retrofit-thumbnail .retrofit-thumbnail-overlay .retrofit-thumbnail-overlay-content {
        @apply h-auto xl:h-16 xl:transition-all xl:duration-200 xl:ease-in-out xl:delay-100;
    }

    .retrofit-thumbnail .retrofit-thumbnail-overlay .retrofit-thumbnail-overlay-content h5 {
        @apply pb-4 pt-8 text-white;
    }

    .retrofit-thumbnail:hover .retrofit-thumbnail-overlay .retrofit-thumbnail-overlay-content h5 {
        @apply pb-4 pt-4;
    }

    .retrofit-thumbnail .retrofit-thumbnail-overlay a {
        @apply xl:invisible xl:opacity-0 transition-all duration-1000 ease-in-out;
    }

    .retrofit-thumbnail:hover .retrofit-thumbnail-overlay a {
        @apply xl:visible xl:opacity-100;
    }

    /*** Swiper ***/
    #sustainability-paths .swiper-slide .swiper-slide-overlay {
        @apply h-full w-full p-8 xl:p-10 !flex flex-col items-center justify-end rounded-3xl bg-transparent transition-colors ease-in-out duration-500;
    }

    #sustainability-paths .swiper-slide.swiper-slide-active .swiper-slide-overlay {
        @apply bg-gradient-to-t from-[rgba(0,0,0,0.6)];
    }

    #sustainability-hover-cards-swiper.swiper,
    #design-principles-swiper.swiper,
    #chairmans-statement-swiper.swiper {
        @apply w-full overflow-visible overflow-x-hidden;
    }

    #chairmans-statement-swiper.swiper .swiper-button-wrapper .swiper-button,
    #sustainability-timeline-swiper .swiper-button-wrapper .swiper-button {
        @apply static w-8 h-8 m-0;
    }

    #chairmans-statement-swiper.swiper {
        @apply pb-20 xl:pb-0 rounded-2xl xl:rounded-3xl bg-tlx-light-grey;
    }

    #chairmans-statement-swiper .swiper-slide {
        @apply flex flex-col xl:flex-row xl:items-center xl:justify-between rounded-2xl xl:rounded-3xl;
    }

    #chairmans-statement-swiper .swiper-slide > img {
        @apply h-60 xl:h-[500px] w-full xl:w-6/12 rounded-2xl xl:rounded-3xl object-cover object-center;
    }

    #chairmans-statement-swiper .swiper-slide .image-card-body {
        @apply xl:h-[500px] xl:w-6/12 px-4 xl:px-32 pt-8 xl:py-20 flex flex-col items-center justify-center;
    }

    #chairmans-statement-swiper .swiper-slide .image-card-body h3 {
        @apply mb-4 text-center text-tlx-blue;
    }

    #chairmans-statement-swiper .swiper-slide .image-card-body h5 {
        @apply m-0 text-center leading-6;
    }

    #chairmans-statement-swiper .swiper-button-wrapper,
    #sustainability-timeline-swiper .swiper-button-wrapper {
        @apply absolute bottom-4 xl:bottom-8 right-4 xl:right-8 flex gap-4;
    }

    #sustainability-timeline-swiper {
        @apply xl:w-10/12;
    }

    #sustainability-timeline-swiper .swiper-slide {
        @apply flex flex-col xl:flex-row xl:items-center xl:justify-between rounded-2xl xl:rounded-3xl bg-white;
    }

    #sustainability-timeline-swiper .swiper-slide > img {
        @apply h-60 xl:h-[400px] xl:w-7/12 flex items-end rounded-2xl xl:rounded-3xl object-cover object-center;
    }

    #sustainability-timeline-swiper .swiper-slide > div {
        @apply h-60 min-h-[300px] sm:min-h-[250px] xl:min-h-[400px] xl:w-5/12 p-4 xl:pt-16 pb-16 xl:pb-8 xl:pl-28 xl:pr-8 flex flex-col;
    }

    #retrofit-product-installations-swiper .below-cards {
        @apply px-0;
    }

    #retrofit-product-installations-swiper .below-cards .below-cards-actions {
        @apply justify-end;
    }

    #retrofit-product-installations-swiper .below-cards .swiper-button-wrapper {
        @apply !flex;
    }

    .live-dot {
        @apply h-6 w-6 mr-2 rounded-full bg-tlx-light-green animate-[blinking_1s_cubic-bezier(.5,0,1,1)_infinite_alternate];
    }

    .carbon-chart {
        @apply absolute transition-all delay-100 duration-500 ease-linear;
    }
}

.scroll {
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
    animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
    transform-origin: 50% 21px;
    will-change: transform, opacity;
}

@keyframes scroll {
    0%, 20% {
        transform: translateY(0) scaleY(1);
    }

    100% {
        transform: translateY(36px) scaleY(2);
        opacity: 0;
    }
}

@keyframes blinking {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media screen and (min-width: 1500px) {
    .circle-bg {
        fill: none;
        stroke-width: 1;
        stroke: rgba(140, 184, 64, 0.1);
    }

    .circle {
        display: none;
        fill: none;
    }

    .circle.animated {
        animation: progress 2s ease-out forwards;
        display: block;
    }

    @keyframes progress {
        0% {
            stroke-dasharray: 0 100;
        }
    }

    .circular-chart .circle {
        stroke: #8CB840;
    }

    .percentage {
        fill: #8CB840;
        text-anchor: middle;
    }
}

.liveText {
    font-size: 20px;
}

.live-animation {
    animation: blinking 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinking {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/*** Sliding Toggle Element ***/

/* container for all of the switch elements
    - adjust "width" to fit the content accordingly
*/
.switches-container {
    width: 100%;
    max-width: 350px;
    position: relative;
    display: flex;
    padding: 0;
    line-height: 2.5rem;
    border-radius: 3rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-weight: 600;
    background-color: #f1f4f9;
}

@media screen and (min-width: 1280px) {
    .switches-container {
        line-height: 3rem;
    }
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: #0B1B30;
}

/* switch highlighters wrapper (sliding left / right)
    - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
    /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
    border-radius: 3rem;
    background: #0B1B30;
    height: 100%;
}

/* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status
*/
.switch div {
    width: 100%;
    text-align: center;
    opacity: 0;
    display: block;
    color: #F1F4F9;
    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
    transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
    transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
    opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
    opacity: 1;
}

/* Fade animation */
.fadein img {
    position:absolute;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 4s;
}

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