/** Shopify CDN: Minification failed

Line 462:9 Expected ":"
Line 1930:0 Unexpected "@"

**/
/* New Microplastics Timer */


.new-micro-promotional-banner {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-weight: 600;
    line-height: 1;
    background-color: #03FF00; /* bg-green-500 */
    font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-discount-text {
    margin:0px;
    font-size: 20px; /* text-xl */
    line-height:124%;
    font-weight:600;
    font-style:normal;
    letter-spacing: -0.4px; /* tracking-tight */
    color: #000000; /* text-black */
     font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-countdown-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 4px 8px;
    margin: 0;
    font-size: 16px; /* text-base */
    letter-spacing: -0.32px; /* tracking-tight */
    line-height:124%;
    min-width: 150px;
    font-weight:600;
    color: #03FF00; /* text-green-500 */
    background-color: #000000; /* bg-black */
     font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-countdown-timer {
    align-self: stretch;
    margin: auto 0;
    color: #03FF00; /* text-green-500 */
       display: inline-block;
    min-width: 130px; /* Enough space for "XXd : XXh : XXmin : XX sec" */
    text-align: center;
    white-space: nowrap; /* Prevents wrapping */
}

/* Responsive design */
@media (max-width: 640px) {
    /* .new-micro-promotional-banner {
        flex-direction: column;
        text-align: center;
    } */

    .new-micro-discount-text {
        font-size: 1.125rem;
    }

    .new-micro-countdown-container {
       min-width: 100px; 
    }

    .new-micro-countdown-container {
        font-size: 1.125rem;
    }

    .new-micro-countdown-timer{
        min-width: 95px; 
    }
}



/* New Microplastics Section 1 */

.micro-new-product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 48px;
    padding-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
}
.micro-new-section-1 {
    padding-bottom:80px;
}
@media (max-width: 768px) {
    .micro-new-product-container {
        padding: 20px;
    }
}

/* Product Gallery Styles */
.micro-new-product-gallery {
    flex: 1;
    min-width: 240px;
    max-width: 100%;
    overflow: hidden;
}

.micro-new-main-image {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 8px;
}

.micro-new-main-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.micro-new-thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* width: 100%; */
}

.micro-new-thumbnail {
    /* width: 172px; */
/* height: 172px; */
flex-shrink: 0;
aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    /* background-color: #f4f4f5; */
    /* height: 170px; */
    /* width: 170px; */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.micro-new-thumbnail.selected {
    border: 1px solid #000080;
    border-radius:15px;
}

.micro-new-thumbnail.gray-bg {
    background-color: #9ca3af;
}

.micro-new-thumbnail-inner {
    /* position: relative; */
    width: auto;
    height: auto;
    aspect-ratio: 1;
    box-shadow: 0px 12px 3px rgba(0,0,0,0);
}

.micro-new-thumbnail-bg {
    border-radius:15px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.micro-new-thumbnail-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1;
}

.micro-new-thumbnail:not(.micro-new-thumbnail-inner) img {
    width: auto;
    height: auto;
    object-fit: contain;
}

.micro-new-thumbnail:last-child img {
    width: auto;
    aspect-ratio: 1;
}

.micro-new-headline {
  font-family: "Queens Compressed Trial", serif; /* assumes Queens font is available in your theme */
  text-align: center;
  font-size: 6.4rem; /* adjust as needed */
  line-height: 1.2;
  margin: 0px;
  /* max-width: 800px; */
  color: #000; /* black for contrast */
}
@media (max-width: 768px) {
  .micro-new-headline {
    font-size: 3.2rem;
  }
}

/* Product Info Styles */
.micro-new-product-info {
    flex: 1;
    min-width: 240px;
    padding-left: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .micro-new-product-info {
        padding-left: 0;
        margin-top: 20px;
    }
}

.micro-new-product-header {
    width: 100%;
}

.micro-new-bestseller-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 100px;
    min-height: 32px;
    margin-bottom: 16px;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-product-title {
    margin-top:0px;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #000080;
    margin-bottom: 16px;
    font-family: Queens Compressed Trial, sans-serif;
}

@media (max-width: 768px) {
    .micro-new-product-title {
        font-size: 36px;
    }
}

.micro-new-rating-section {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.micro-new-stars {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* .micro-new-stars img {
    width: 16px;
    height: 16px;
} */

.micro-new-certification {
    font-size: 14px;
    color: #000;
    font-weight:400;
    line-height:normal;
    font-style:normal;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-product-subtitle {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.80);
    margin-bottom: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: Mintgrotesktrial, sans-serif;
}

/* Product Features */
.micro-new-product-features {
    margin-bottom: 32px;
    font-size: 16px;
    color: #000;
}

.micro-new-feature-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    /* flex-wrap: wrap; */
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-feature-bullet {
    width: 4px;
    height: 14px;
    background-color: #000;
    border-radius: 100px;
    flex-shrink: 0;
}

/* Pricing Section */
.micro-new-pricing-section {
    margin-bottom:20px;
    width: 100%;
}

.micro-new-pricing-title {
    margin-top:0px;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #000;
    margin-bottom: 12px;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-pricing-options {
    width: 100%;
}

.micro-new-pricing-option {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 20px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #E2E2E2;
    margin-bottom: 12px;
}

.micro-new-pricing-option.selected {
    border: 2px solid #03FF00;
}

.micro-new-radio-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px;
    width: 24px;
    overflow: hidden;
}

.micro-new-radio-circle {
    width: 20px;
    height: 20px;
    border: 1px solid #CCC;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.micro-new-radio-button.selected .micro-new-radio-circle {
    border: 1px solid #000;
}

/* .micro-new-radio-dot {
    width: 9px;
    height: 9px;
    background-color: #000;
    border-radius: 50%;
} */

.micro-new-radio-dot {
    display: none;
}

/* Show radio dot when option is selected */
.micro-new-pricing-option.selected .micro-new-radio-dot {
    display: block;
    width: 9px;
    height: 9px;
    background-color: #000;
    border-radius: 50%;
}

/* Change circle border when selected */
.micro-new-pricing-option.selected .micro-new-radio-circle {
    border: 1px solid #000;
}

.micro-new-option-details {
    flex: 1;
    min-width: 240px;
}

.micro-new-option-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #000;
    margin-bottom: 6px;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-option-savings {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #0005BD;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-option-pricing {
    display: flex;
    gap: 8px;
    align-items: end;
    font-size: 18px;
    white-space: nowrap;
}

.micro-new-original-price {
    color: rgba(0, 0, 0, 0.40);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%; /* 19.8px */
    text-decoration-line: line-through;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-sale-price {
    color#000;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 19.8px */
    font-family: Mintgrotesktrial, sans-serif;
}

/* Buy Button */
.micro-new-buy-button {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px 32px;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background-color: #0005BD;
    border: none;
    border-radius: 24px;
    min-height: 52px;
    cursor: pointer;
    margin-bottom: 10px;
    font-family: Mintgrotesktrial, sans-serif;
}

@media (max-width: 768px) {
    .micro-new-buy-button {
        padding: 16px 20px;
    }
}
/* 
.micro-new-buy-button:hover {
    background-color: #1d4ed8;
} */

/* Shipping Timeline */
.micro-new-shipping-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 16px;
    width: 100%;
    border-radius: 16px;
}

.micro-new-timeline-step {
    display: flex;
    flex-direction: column;
    width: 52px;
    text-align: center;
}

.micro-new-timeline-step:nth-child(3),
.micro-new-timeline-step:nth-child(5) {
    width: 78px;
}

.micro-new-step-icon {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 32px;
    height: 32px;
    background-color: #f4f4f5;
    border-radius: 70px;
    min-height: 32px;
    margin-bottom: 8px;
}

/* .micro-new-step-icon img {
    width: 16px;
    height: 16px;
} */

.micro-new-step-text {
    width: 100%;
    color: #000;
    white-space: nowrap;
}

.micro-new-timeline-step:nth-child(3) .micro-new-step-text,
.micro-new-timeline-step:nth-child(5) .micro-new-step-text {
    text-align: center;
}

.micro-new-step-title {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color:#000;
    font-family: Mintgrotesktrial, sans-serif;
}

.micro-new-step-subtitle {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color:#000;
    font-family: Mintgrotesktrial, sans-serif;
}

/* .micro-new-timeline-connector {
    flex: 1;
    align-self: stretch;
    margin: auto 0;
    aspect-ratio: 200;
    stroke: 1px;
    stroke-color: #1e40af;
    width: 200px;
}

.micro-new-timeline-connector img {
    width: 100%;
    height: auto;
} */

.micro-new-timeline-connector {
    flex: 1;
    align-self: stretch;
    margin: auto 0;
    width: 200px;
    height: 2px; /* matches PNG height */
    background: repeating-linear-gradient(
        to right,
        #0005BD 0 4px,     /* blue dash */
        transparent 4px 8px /* gap */
    );
}


@media (max-width: 768px) {
    .micro-new-timeline-connector {
        width: 100px;
        aspect-ratio: 100;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .micro-new-product-container {
        flex-direction: column;
    }

    /* .micro-new-thumbnail {
        width: calc(50% - 4px);
        height: 120px;
    } */

    .micro-new-thumbnail-inner {
        width: auto;
        height: 100%;
        position:relative;
    }

    
    .micro-new-thumbnail:not(.micro-new-thumbnail-inner) img {
        width: 100%;
    }

    .micro-new-pricing-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .micro-new-option-details {
        min-width: auto;
        width: 100%;
    }

    .micro-new-shipping-timeline {
        justify-content: space-between;
    }

    .micro-new-timeline-step {
        width: auto;
        flex: 0 0 auto;
    }

    .micro-new-timeline-connector {
        flex: 1;
        min-width: 50px;
    }
}



/* Microplastic Section 2 */






 /* Main section container */
        .new-microplastics-section-2 {
            display: flex;
            flex-direction: column;
            padding: 120px 80px;
            background-color: #F7F7F7;
            /* min-height: 100vh; */
        }

        /* Main heading styles */
       .new-micro-2-main-heading {
    /* max-height: 158px; */
    max-width:976px;
    margin-top:0px;
    align-self: center;
    font-size: 72px;
    font-style: normal;
    font-weight: 300; /* font-light equivalent */
    text-align: center;
    color: #000000;
    line-height: 110%; /* leading-[79px] */
    margin-bottom: 0;
    font-family: Queens Compressed Trial, sans-serif;
}


        /* Highlight text color */
        .new-micro-2-highlight-text {
            color: #0005BD;
        }

        /* Videos container */
        .new-micro-2-videos-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            align-items: center;
            margin-top: 3rem;
            width: 100%;
            position: relative;
        }

        /* Video wrapper for positioning controls */
        .new-micro-2-video-wrapper {
            position: relative;
            flex: 1 1 0%;
            align-self: stretch;
            margin: auto 0;
            width: 100%;
            min-width: 15rem;
            border-radius: 20px;
            overflow: hidden;
            background-color: #F7F7F7;
        }

        /* Individual video styles */
        .new-micro-2-section-video {
            width: 100%;
            height: 100%;
            aspect-ratio: 0.56;
            object-fit: cover;
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .new-micro-2-section-video:hover {
            transform: scale(1.02);
        }

        /* Play/Pause button styles */
        .new-micro-2-play-pause-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #FFFFFF;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #0005BD;
            backdrop-filter: blur(10px);
            z-index: 10;
        }

        .new-micro-2-play-pause-btn:hover {
            background-color: white;
            transform: translate(-50%, -50%) scale(1.1);
        }

        .new-micro-2-play-pause-btn:focus {
            outline: 2px solid white;
            outline-offset: 2px;
        }

        .new-micro-2-play-pause-btn:active {
            transform: translate(-50%, -50%) scale(0.95);
        }

        /* Play/Pause icon styles */
        .new-micro-2-play-icon,
        .new-micro-2-pause-icon {
            width: 24px;
            height: 24px;
            transition: opacity 0.2s ease;
        }

        /* Video states */
        .new-micro-2-video-wrapper.playing .new-micro-2-play-pause-btn {
            opacity: 0;
            pointer-events: none;
        }

        .new-micro-2-video-wrapper:hover.playing .new-micro-2-play-pause-btn {
            opacity: 1;
            pointer-events: all;
        }

        /* Loading state */
        .new-micro-2-video-wrapper.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid rgba(0, 5, 189, 1);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 5;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Error state */
        .new-micro-2-video-wrapper.error::after {
            content: '⚠️ Video unavailable';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
            font-size: 0.875rem;
            z-index: 5;
        }

        /* Mobile Slider Styles */
        .new-micro-2-slider-container {
            display: none;
            position: relative;
            width: 100%;
            margin-top: 3rem;
        }

        .new-micro-2-slider-wrapper {
            overflow: hidden;
            border-radius: 20px;
            position: relative;
        }

        .new-micro-2-slider-track {
            display: flex;
            transition: transform 0.3s ease;
            width: 300%; /* 3 videos = 300% */
        }

        .new-micro-2-slider-slide {
            width: 33.333%; /* 100% / 3 videos */
            flex-shrink: 0;
        }

        .new-micro-2-slider-slide .new-micro-2-video-wrapper {
            width: 100%;
            margin: 0;
            border-radius: 0;
        }

        /* Dots navigation */
        .new-micro-2-dots-container {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 24px;
        }

        .new-micro-2-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(0, 5, 189, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            padding: 0;
        }

        .new-micro-2-dot.active {
            background-color: #0005BD;
            transform: scale(1.2);
        }

        .new-micro-2-dot:hover {
            background-color: rgba(0, 5, 189, 0.6);
        }

        .new-micro-2-dot:focus {
            outline: 2px solid #0005BD;
            outline-offset: 2px;
        }

        /* Responsive styles for mobile */
        @media (max-width: 768px) {
            .new-microplastics-section-2 {
                padding: 6rem 1.25rem;
            }

            .new-micro-2-main-heading {
                max-width: 100%;
                font-size:3rem;
                line-height: 38px;
            }

            /* Hide desktop grid, show mobile slider */
            .new-micro-2-videos-container {
                display: none;
            }

            .new-micro-2-slider-container {
                display: block;
            }

            .new-micro-2-play-pause-btn {
                width: 50px;
                height: 50px;
            }

            .new-micro-2-play-icon,
            .new-micro-2-pause-icon {
                width: 20px;
                height: 20px;
            }
        }

        @media (max-width: 480px) {
            .new-microplastics-section-2 {
                padding: 4rem 1rem;
            }

            .new-micro-2-main-heading {
                /* font-size: 1.875rem; */
                /* line-height: 2.25rem; */
            }

            .new-micro-2-slider-container {
                margin-top: 2rem;
            }

            .new-micro-2-play-pause-btn {
                width: 45px;
                height: 45px;
            }

            .new-micro-2-play-icon,
            .new-micro-2-pause-icon {
                width: 18px;
                height: 18px;
            }

            .new-micro-2-dots-container {
                margin-top: 20px;
                gap: 10px;
            }

            .new-micro-2-dot {
                width: 10px;
                height: 10px;
            }
        }

        /* Accessibility improvements */
        .new-micro-2-section-video:focus {
            outline: 2px solid rgba(0, 5, 189, 1);
            outline-offset: 2px;
        }

        /* Reduced motion preferences */
        @media (prefers-reduced-motion: reduce) {
            .new-micro-2-section-video,
            .new-micro-2-play-pause-btn,
            .new-micro-2-slider-track,
            .new-micro-2-dot {
                transition: none;
            }

            .new-micro-2-section-video:hover {
                transform: none;
            }

            .new-micro-2-video-wrapper.loading::after {
                animation: none;
            }
        }


/* Microplastic Section 3 */





.new-micro-3-report-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 80px;
    background-color: white;
}

.new-micro-3-main-heading {
    margin-top:0px;
    text-align: center;
    font-size: 72px;
    font-weight: 300;
    line-height: 110%;
    color: black;
    margin-bottom: 40px;
    font-family: Queens Compressed Trial, sans-serif;
}

.new-micro-3-content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    /* align-items: flex-start; */
    width: 100%;
}

.new-micro-3-left-column {
    flex: 1;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.new-micro-3-right-column {
    flex: 1;
    min-width: 15rem;
}

.new-micro-3-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    border-radius:16px;
    background-color: #F3F3F3;
    
}

.new-micro-3-card-content {
    padding-left:40px;
    padding-top:48px;
    padding-right:40px;
    padding-bottom:75px;
}

.new-micro-3-microplastics-card {
    padding: 0.125rem 0.125rem 0 0.125rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.new-micro-3-microplastics-card .card-content {
    align-self: center;
    max-width: 36.25rem;
    width: 100%;
    margin-bottom: 5rem;
}

.new-micro-3-strategies-card {
   padding-left:40px;
    padding-top:48px;
    padding-right:44px;
}

.new-micro-3-strategies-content {
    min-height: 10.9375rem;
}

.new-micro-3-recommendations-card {
    padding-left: 40px;
    padding-top: 48px;
    height: 100%;
    min-height: 100%;
}

.new-micro-3-recommendations-content {
    width: 100%;
    padding-right:44px;
}

.new-micro-3-card-title {
    margin-top:0px;
    font-size: 24px;
    font-weight: 600;
    line-height: 130%;
    color: black;
    margin-bottom: 16px;
    font-family: Mintgrotesktrial, sans-serif;
}


.new-micro-3-card-description {
    font-size:18px;
    color:  rgba(0, 0, 0, 0.80);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-3-card-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    padding-bottom:70px;
}


.new-micro-3-image-container {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    margin-top: 2.5rem;
    border-top: 40px;
}

.new-micro-3-strategies-image {
     width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1.94;
}

.new-micro-3-recommendations-image {
    object-fit: contain;
    align-self: flex-end;
    margin-top: auto;
    max-width: 100%;
    
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .new-micro-3-report-section {
        padding: 6rem 1.25rem;
    }

    .new-micro-3-main-heading {
        font-size: 3.25rem;
        max-width: 100%;
    }

    .new-micro-3-content-grid {
        flex-direction: column;
    }

    .new-micro-3-left-column,
    .new-micro-3-right-column {
        flex: none;
        width: 100%;
    }

    .new-micro-3-microplastics-card .new-micro-3-card-content {
        max-width: 100%;
    }

    .new-micro-3-card-content {
    padding: 2rem 2rem 30px 2rem; /* top, right, bottom, left */
    }


    .new-micro-3-strategies-card {
        padding: 2rem 2rem 0rem 2rem;
    }

    .new-micro-3-recommendations-card {
        padding: 2rem 0 6rem 2rem;
    }

    .new-micro-3-recommendations-content {
        max-width: 100%;
    }

    .new-micro-3-card-title {
        max-width: 100%;
    }

    .new-micro-3-card-description {
        max-width: 100%;
    }

    .new-micro-3-microplastics-card {
        padding: 4rem 0.125rem;
    }

    .new-micro-3-microplastics-card .new-micro-3-card-content {
        margin-bottom: 2.5rem;
    }

    .new-micro-3-image-container {
        margin-top: 2.5rem;
        width: 100%;
        max-width: 23.75rem;
    }

    .new-micro-3-recommendations-image {
        margin-top: 2.5rem;
        width: 100%;
        max-width: 37rem;
    }
}

/* Additional responsive adjustments for very small screens */
@media (max-width: 480px) {
    .new-micro-3-report-section {
        padding: 4rem 1rem;
    }

    .new-micro-3-main-heading {
        /* font-size: 2rem; */
    }

    .new-micro-3-card-title {
        font-size: 1.25rem;
    }

    .new-micro-3-card-description {
        font-size: 1rem;
    }

     .new-micro-3-card-content {
    padding: 2rem 2rem 30px 2rem; /* top, right, bottom, left */
    }


    .new-micro-3-strategies-card {
        padding: 2rem 2rem 0rem 2rem;
    }

    .new-micro-3-recommendations-card {
        padding: 2rem 0 6rem 2rem;
    }

    .new-micro-3-microplastics-card {
        padding: 3rem 0.125rem;
    }

    .new-micro-3-recommendations-card {
        padding-bottom: 4rem;
    }

    .new-micro-3-recommendations-image {
        padding-bottom:0px;
    }
}

/* Ensure images are responsive */
@media (max-width: 768px) {
    .new-micro-3-microplastics-image,
    .new-micro-3-strategies-image,
    .new-micro-3-recommendations-image {
        max-width: 100%;
        height: auto;
    }
}



/* Microplastics Section 4 */


/* Container styles - equivalent to px-10 pt-10 pb-20 bg-white max-md:px-5 */
.new-micro-4-container {
    padding-left: 4rem;  /* px-10 = 40px = 2.5rem */
    padding-right: 4rem; /* px-10 = 40px = 2.5rem */
    padding-top: 4rem;   /* pt-10 = 40px = 2.5rem */
    padding-bottom: 8rem;  /* pb-20 = 80px = 5rem */
    background-color: white;
}

/* Video wrapper for positioning */
.new-micro-4-video-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}

/* Video styles - equivalent to object-contain w-full rounded-3xl aspect-[1.78] max-md:max-w-full */
.new-micro-4-design-video {
    object-fit: contain;
    width: 100%;
    border-radius: 1.5rem; /* rounded-3xl = 24px = 1.5rem */
    aspect-ratio: 1.78;
    display: block;
    cursor: pointer;
}

/* Play/Pause button styles */
.new-micro-4-play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #0005BD;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.new-micro-4-play-pause-btn:hover {
    background-color: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.1);
}

.new-micro-4-play-pause-btn:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.new-micro-4-play-pause-btn svg {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

/* Hide button when video is playing (will be controlled by JS) */
.new-micro-4-video-wrapper.playing .new-micro-4-play-pause-btn {
    opacity: 0;
    pointer-events: none;
}

.new-micro-4-video-wrapper:hover .new-micro-4-play-pause-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Media query for max-md (max-width: 768px) */
@media (max-width: 768px) {
    .new-micro-4-container {
        padding-left: 1.25rem; /* max-md:px-5 = 20px = 1.25rem */
        padding-right: 1.25rem; /* max-md:px-5 = 20px = 1.25rem */
    }

    .new-micro-4-design-video {
        max-width: 100%; /* max-md:max-w-full */
    }

    .new-micro-4-play-pause-btn {
        width: 60px;
        height: 60px;
    }

    .new-micro-4-play-pause-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Additional responsive considerations */
@media (max-width: 480px) {
    .new-micro-4-container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .new-micro-4-design-video {
        border-radius: 1rem;
    }

    .new-micro-4-play-pause-btn {
        width: 50px;
        height: 50px;
    }

    .new-micro-4-play-pause-btn svg {
        width: 20px;
        height: 20px;
    }
}




/* Microplastics Section 5 */




/* Desktop Timeline Styles */
       .new-micro-5-timeline-container {
    display: flex;
    gap: 160px;
    justify-content: center;
    align-items: center;
    padding: 140px 0;
    margin: 0 auto;
    width: 100%;
    background-color:white;
}

       .new-micro-5-left-column {
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: flex-end;
    width: 484px;
    flex-shrink: 0;
}

.new-micro-5-timeline-item {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 163px;
}

.new-micro-5-timeline-title {
    font-size: 64px;
    color: #000;
    line-height: 110%;
    font-weight: 300;
    font-style:normal;
    font-family: Queens Compressed Trial, sans-serif;
}

       .new-micro-5-center-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 16px;
    height: 865px;
    flex-shrink: 0;
}

.new-micro-5-timeline-svg-container {
    display: flex;
    width: 16px;
    height: 865px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.new-micro-5-timeline-svg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

       .new-micro-5-right-column {
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: flex-start;
    width: 484px;
    flex-shrink: 0;
}

.new-micro-5-feature-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height:16rem;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    
}

.new-micro-5-feature-item {
    display: flex;
    gap: 8px;
    align-self: stretch;
}
.new-micro-5-bullet-icon {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.new-micro-5-bullet-icon-aligned {
    display: flex;
    padding-top: 6px;
    align-items: center;
    gap: 10px;
    width: 8px;
    height: 15px;
    flex-shrink: 0;
}

.new-micro-5-feature-text {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    flex: 1 0 0;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: Mintgrotesktrial, sans-serif;
}
        /* Tablet styles */
        @media (max-width: 1024px) {
            .new-micro-5-timeline-container {
                gap: 80px;
                padding: 80px 20px;
            }

            .new-micro-5-left-column {
                width: 40%;
                gap: 80px;
            }

            .new-micro-5-right-column {
                width:  40%;
                gap: 80px;
            }

            .new-micro-5-timeline-title {
                font-size: 48px;
            }

            .new-micro-5-feature-section {
                min-height: 120px;
                gap: 10px;
            }
        }

        /* Mobile styles - Side by side layout */
        @media (max-width: 768px) {
            .new-micro-5-timeline-container {
                display: grid;
                grid-template-columns: 60px 1fr;
                gap: 20px;
                padding: 100px 20px;
                align-items: start;
            }

            .new-micro-5-left-column {
                display: none; /* Hide desktop titles on mobile */
            }

            .new-micro-5-center-column {
                grid-column: 1;
                width: 100%;
                position: static;
                justify-self: center;
            }

            .new-micro-5-right-column {
                grid-column: 2;
                width: 100%;
                gap: 80px;
            }

            /* Mobile content sections with titles */
            .new-micro-5-feature-section {
                min-height: auto;
                height:auto;
                gap: 16px;
                padding: 0;
                border-left: 2px solid transparent;
                position: relative;
            }

            /* .new-micro-5-feature-section::before {
                content: '';
                position: absolute;
                left: -22px;
                top: 30px;
                width: 2px;
                height: calc(100% - 60px);
                background-color: #CCCCCC;
                z-index: 1;
            } */

            /* .new-micro-5-feature-section.active::before {
                background-color: #0005BD;
            } */

            /* Add section titles for mobile */
            .new-micro-5-feature-section:nth-child(1)::before {
                font-family: Queens Compressed Trial, sans-serif;
                content: 'Order & Test';
            }

            .new-micro-5-feature-section:nth-child(2)::before {
                font-family: Queens Compressed Trial, sans-serif;
                content: 'Get your results';
            }

            .new-micro-5-feature-section:nth-child(3)::before {
                font-family: Queens Compressed Trial, sans-serif;
                content: 'Take action';
            }

            .new-micro-5-feature-section:nth-child(4)::before {
                font-family: Queens Compressed Trial, sans-serif;
                content: 'Detox';
            }

            .new-micro-5-feature-section::before {
                display: block;
                font-size: 28px;
                color: #000;
                line-height: 1.2;
                font-weight: 600;
                margin-bottom: 16px;
                font-family: Mintgrotesktrial, sans-serif;
            }

            .new-micro-5-feature-item {
                gap: 8px;
                margin-bottom: 8px;
            }

            .new-micro-5-feature-text {
                font-size: 16px;
                line-height: 1.4;
            }

            /* Adjust SVG for mobile */
            .new-micro-5-timeline-svg {
                height: auto;
                min-height: 800px;
            }

            /* Active state styling
            .new-micro-5-feature-section.active {
                background-color: rgba(0, 5, 189, 0.02);
                border-radius: 8px;
                padding: 20px 16px;
                margin: 0 -16px;
            } */

            /* .new-micro-5-feature-section.active::after {
                color: #0005BD;
            } */
        }

        /* Extra small mobile */
        @media (max-width: 480px) {
            .new-micro-5-timeline-container {
                grid-template-columns: 50px 1fr;
                gap: 16px;
                padding: 100px 12px;
            }

            .new-micro-5-feature-section::after {
                font-size: 24px;
            }

            .new-micro-5-feature-text {
                font-size: 14px;
            }

            .new-micro-5-feature-section {
                gap: 12px;
                padding:0;
            }

            .new-micro-5-right-column {
                gap:95px;
            }
        }

    





/* Microplastics Section 6 */

.new-micro-6-product-showcase {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    background-color: #f4f4f5;
    min-height: 800px;
}

.new-micro-6-image-section {
    display: flex;
    position: relative;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 80px 36px 80px 80px;
    background-color: #F7F7F7;
    height: 800px;
}

.new-micro-6-product-image {
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 24px;
    height: 640px;
    width: 640px;
}

.new-micro-6-content-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: center;
    align-items: flex-start;
    padding: 0 80px;
    background-color: #F7F7F7;
    height: 800px;
    width: 756px;
}

.new-micro-6-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    width: 100%;
}

.new-micro-6-header-section {
    display: flex;
    flex-direction: column;
    gap:8px;
    align-items: flex-start;
    width: 100%;
}

.new-micro-6-badge-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.new-micro-6-save-badge {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 20px;
    color: #03FF00;
    background-color: #000000;
}

.new-micro-6-save-text {
    font-size: 16px;
    font-style:normal;
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 124%; 
    font-family: Mintgrotesktrial, sans-serif;
    color: #03FF00;
}

.new-micro-6-product-title {
    margin:0px;
    width: 100%;
    font-size: 64px;
    font-weight: 300;
    color: #000000;
    line-height: 110%;
    font-family: Queens Compressed Trial, sans-serif;
}

.new-micro-6-product-description {
    width: 100%;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    line-height:normal;
    font-style:normal;
    font-family: Mintgrotesktrial, sans-serif;
    margin:0px;
}

.new-micro-6-pricing-section {
    display: flex;
    gap: 8px;
}

.new-micro-6-current-price {
    font-size: 65px;
    font-weight: 600;
    color: #0005BD;
    font-style:normal;
    line-height:normal;
    font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-6-original-price-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 16px;
}

.new-micro-6-original-price {
    font-size: 32px;
    line-height: 110%;
    font-weight: 400;
    text-decoration-line: line-through;
    color: rgba(0, 0, 0, 0.4);
    font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-6-cta-button {
    gap: 10px;
    padding: 10px 32px;
    height: 56px;
    font-size: 18px;
    font-weight: 600;
    background-color: #03FF00;
    cursor: pointer;
    border: none;
    border-radius: 48px;
    color: #2d1b69;
    /* transition: #000080 0.2s ease; */
    font-family: Mintgrotesktrial, sans-serif;
}

.new-micro-6-cta-button:hover {
    background-color: #03FF00;
    /* transform: translateY(-1px); */
}

.new-micro-6-cta-button:active {
    /* transform: translateY(0); */
}

/* Tablet styles */
@media (max-width: 991px) {
    .new-micro-6-product-showcase {
        flex-direction: column;
        min-height: auto;
    }

    .new-micro-6-image-section {
        padding: 40px 20px;
        width: 100%;
        height: auto;
    }

    .new-micro-6-product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 500px;
    }

    .new-micro-6-content-section {
        gap: 32px;
        padding: 40px 20px;
        width: 100%;
        height: auto;
    }

    .new-micro-6-product-title {
        font-size: 60px;
    }

    .new-micro-6-current-price {
        font-size: 60px;
    }

    .new-micro-6-original-price {
        font-size: 24px;
    }
}

/* Mobile styles */
@media (max-width: 640px) {
    .new-micro-6-image-section {
        padding: 20px;
    }

    .new-micro-6-product-image {
        /* max-width: 300px; */
    }

    .new-micro-6-content-section {
        gap: 24px;
        padding: 20px;
    }

    .new-micro-6-header-section {
        gap: 24px;
    }

    .new-micro-6-product-title {
        font-size: 48px;
        line-height: 40px;
    }

    .new-micro-6-product-description {
        font-size: 16px;
    }

    .new-micro-6-current-price {
        font-size: 48px;
    }

    .new-micro-6-original-price {
        font-size: 20px;
    }

    .new-micro-6-cta-button {
        width: 100%;
        height: 48px;
        font-size: 16px;
    }
}



@@font-face {
  font-family: "Nunitosans";
  src: url("../fonts/NunitoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunitosans";
  src: url("../fonts/NunitoSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Queens Compressed Trial";
  src: url("/cdn/shop/files/QueensCompressedTrial-Medium.woff?v=1690485769")
      format("woff"),
    url("/cdn/shop/files/QueensCompressedTrial-Medium.woff2?v=1690485769")
      format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Queens Compressed Trial";
  src: url("/cdn/shop/files/QueensCompressedTrial-Light.woff?v=1690485768")
      format("woff"),
    url("/cdn/shop/files/QueensCompressedTrial-Light.woff2?v=1690485768")
      format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Queenscondensedtrial";
  src: url("/cdn/shop/files/QueensCompressedTrial-Light.woff?v=1690485768")
      format("woff"),
    url("/cdn/shop/files/QueensCompressedTrial-Light.woff2?v=1690485768")
      format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Angleciaprodisplay";
  src: url("../fonts/AngleciaProDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mintgrotesktrial";
  src: url("/cdn/shop/files/MintGroteskTrial-Regular.woff?v=1690485768")
      format("woff"),
    url("/cdn/shop/files/MintGroteskTrial-Regular.woff2?v=1690485767")
      format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mintgrotesktrial";
  src: url("/cdn/shop/files/MintGrotesk-Bold.woff2?v=1690883493")
      format("woff"),
    url("/cdn/shop/files/MintGrotesk-Bold.woff?v=1690883492")
      format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mintgrotesktrial";
  src: url("/cdn/shop/files/MintGroteskTrial-Medium.woff?v=1690485768")
      format("woff"),
    url("/cdn/shop/files/MintGroteskTrial-Medium.woff2?v=1690485768")
      format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mintgrotesktrial";
  src: url("/cdn/shop/files/MintGroteskTrial-Heavy.woff?v=1690879375")
      format("woff"),
    url("/cdn/shop/files/MintGroteskTrial-Heavy.woff2?v=1690879374")
      format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Mintgrotesktrial-light";
  src: url("/cdn/shop/files/MintGrotesk-Regular_2.woff?v=1691091285")
      format("woff"),
    url("/cdn/shop/files/MintGrotesk-Regular_1.woff2?v=1691091285")
      format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}