/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* .elementor-widget-image img {
	display: block;
} */

body.ocean-brands .brands-footer,
body.nos-marques .brands-footer,
body.purpose .brands-footer,
body.objectif .brands-footer {
	display: none;
}

header {
	position: relative;
	z-index: 500;
}

.mfp-content {
    width: 90%;
    max-width: 900px !important;
}

.img-fix img {
	display: block !important;
}

.un-tooltip-container {
	position: relative;
	width: auto;
}

.un-tooltip {
	opacity: 0;
	min-width: 350px;
	pointer-events: none;
    transform: translate(-50%, -5px);
	transition: all 0.2s ease;
	filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25));
}

.un-tooltip:before {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    top: 98%;
    border-top: 25px solid #FFF;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.plastic-stat:after {
	content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 25px;
    background: #1F3C7E;
}

.deficit-stat:after {
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    right: -6px;
    bottom: -6px;
}

.used-stat:after {
    left: -6px;
    top: -6px;
    right: auto;
    bottom: auto;
}

.collected-stat:after {
    left: -6px;
    top: -6px;
    right: auto;
    bottom: auto;
}

.cans-container {
    display: flex; 
    justify-content: space-between;
	gap: 1rem;
}

.cans-container svg {
	height: auto;
}

.cans-container .can-fill {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cans-container svg:nth-child(1) .can-fill {
    transition-delay: 0s;
}

.cans-container svg:nth-child(2) .can-fill {
    transition-delay: 0.1s;
}

.cans-container svg:nth-child(3) .can-fill {
    transition-delay: 0.2s;
}

.cans-container svg:nth-child(4) .can-fill {
    transition-delay: 0.3s;
}

.cans-container svg:nth-child(5) .can-fill {
    transition-delay: 0.4s;
}

.cans-container svg:nth-child(6) .can-fill {
    transition-delay: 0.5s;
}

.cans-container svg:nth-child(7) .can-fill {
    transition-delay: 0.6s;
}

.cans-container svg:nth-child(8) .can-fill {
    transition-delay: 0.7s;
}

.cans-container svg:nth-child(9) .can-fill {
    transition-delay: 0.8s;
}

.cans-container svg:nth-child(10) .can-fill {
    transition-delay: 0.9s;
}

.goal-tracker.cans.progress-1 .cans-container svg:nth-child(1) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-2 .cans-container svg:nth-child(-n+2) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-3 .cans-container svg:nth-child(-n+3) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-4 .cans-container svg:nth-child(-n+4) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-5 .cans-container svg:nth-child(-n+5) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-6 .cans-container svg:nth-child(-n+6) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-7 .cans-container svg:nth-child(-n+7) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-8 .cans-container svg:nth-child(-n+8) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-9 .cans-container svg:nth-child(-n+9) .can-fill {
    opacity: 1;
}

.goal-tracker.cans.progress-1 .cans-container0 svg:nth-child(-n+10) .can-fill {
    opacity: 1;
}

.goal-tracker.sustainability .svg-filler {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	transition: clip-path 0.75s ease;
}

.goal-tracker.sustainability.active .svg-filler {
	clip-path: polygon(var(--sustainability) 0, 100% 0, 100% 100%, var(--sustainability) 100%);
	transition: clip-path 0.75s ease;
}

.goal-tracker.msc .svg-filler {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	transition: clip-path 0.75s ease;
}

.goal-tracker.msc.active .svg-filler {
	clip-path: polygon(0 var(--msc), 100% var(--msc), 100% 100%, 0 100%);
	transition: clip-path 0.75s ease;
}

.tracking-pin {
    transition: left 0.75s ease;
}

.goal-tracker.salmon.active .tracking-pin {
    left: var(--salmon) !important;
}

.goal-tracker.skipjack.active .tracking-pin {
    left: var(--skipjack) !important;
}

.goal-tracker.yellowfin.active .tracking-pin {
    left: var(--yellowfin) !important;
}

.goal-tracker.albacore.active .tracking-pin {
    left: var(--albacore) !important;
}

.goal-tracker.oysters.active .tracking-pin {
    left: var(--oysters) !important;
}

.goal-tracker.mackerel.active .tracking-pin {
    left: var(--mackerel) !important;
}

.goal-tracker.sardines.active .tracking-pin {
    left: var(--sardines) !important;
}

.goal-tracker.crabmeat.active .tracking-pin {
    left: var(--crabmeat) !important;
}

.goal-tracker.clams.active .tracking-pin {
    left: var(--clams) !important;
}

.goal-tracker.anchovies.active .tracking-pin {
    left: var(--anchovies) !important;
}

.stat-counter-1 .elementor-counter-number-wrapper span {
    flex-grow: 0;
}

.stat-counter-1 .elementor-counter-title {
    text-align: left;
}

/* B Corp Styles */
.bcorp-progress-container {
    height: 10px;
    width: 100%;
    background-color: #D1D3D4;
    border-radius: 20px;
    overflow: hidden;
}

.bcorp-progress {
    background: #1A345E;
    height: 120%;
    width: 0%;
	transition: width 2s ease-out;
}

.bcorp-progress-container span {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 5px;
    background: white;
}

.bcorp-progress-container span:nth-of-type(1) {
    left: 25%;
}

.bcorp-progress-container span:nth-of-type(2) {
    left: 50%;
}

.bcorp-progress-container span:nth-of-type(3) {
    left: 75%;
}

.bcorp-range {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: #0E3561;
	font-size: 10px;
	position: absolute;
    top: 25px;
}

.bcorp-slide-nav .elementor-widget-container {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.bcorp-swiper-button-next,
.bcorp-swiper-button-prev {
    display: flex;
    align-items: center;
    cursor: pointer;
}


.bcorp-swiper-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bcorp-swiper-pagination .swiper-pagination-bullet {
    width: 44px;
    height: 4px;
    border-radius: 20px;
    margin-bottom: 0 !important;
    background-color: #E3E3E3;
    opacity: 1;
    cursor: pointer;
}

.bcorp-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #00285E;
}

@media screen and (min-width: 1025px) {
	.un-tooltip-container:hover .un-tooltip {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -25px);
	}
}

@media screen and (max-width: 1024px) {
	.goal-tracker br {
		display: none;
	}
	
	.cans-container {
		flex-wrap: wrap;
    	gap: 1rem;
	}
	
	.cans-container svg {
		flex: 0 1 15%;
	}
	
	.deficit-stat:after {
        right: auto;
        left: -6px;
    }
    
    .deficit-stat {
        left: calc(50vw - 260px) !important;
    }
	
	.used-stat:after {
        bottom: -6px;
        top: auto;
    }
	
	.collected-stat:after {
        left: auto;
        right: -6px;
    }
	
	.un-tooltip {
		display: none;
	}

    .collected-stat {
        transform: translateX(-75%);
    }
}

@media screen and (max-width: 767px) {
	.un-tooltip {
		transform: translate(0, -5px);
	}
	
	.un-tooltip.active {
		transform: translate(0, -25px);
	}
	
	.un-tooltip:before {
		left: 12px;
		right: auto;
	}
	
	.deficit-stat {
        left: calc(50vw - 160px) !important;
    }
	
	.stat-counter-1 .elementor-counter-number-wrapper {
		justify-content: center;
	}
	
	.stat-counter-1 .elementor-counter-title {
		text-align: center;
	}
	.bcorp-slide-nav .elementor-widget-container {
		justify-content: center;
	}
} 