.trend-year #canvasAnimationforYears .nav.nav-tabs{position: relative;width: fit-content}
.trend-year #canvasAnimationforYears .canvasWrapperOuter{min-height: 80rem;position: relative; display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);grid-column-gap: 0px;grid-row-gap: 0px;}

.trend-year .tab-panes{min-height: 80rem;}
.trend-year .min-height img.mapImage{position: absolute;max-width: 100%;top: 50%;transform: translateY(-50%);z-index: -100;filter: opacity(0.2)}
.trend-year .right-0{right: 5%;top: 10%}
.trend-year .canvasWrapper{pointer-events: none;transition: transform 0.3s ease;/*max-width: 500px;*/position: relative;}

.trend-year .canvasWrapper:nth-child(1)::before{scale: 2;}
.trend-year .canvasWrapper:nth-child(1){display: none;}
.trend-year .canvasWrapper:nth-child(2){ grid-area: 2 / 1 / 3 / 2;}
.trend-year .canvasWrapper:nth-child(4){grid-area: 1 / 1 / 2 / 2;}
.trend-year .canvasWrapper:nth-child(3){grid-area: 1 / 2 / 2 / 3; }
.trend-year .canvasWrapper:nth-child(5){grid-area: 2 / 2 / 3 / 3;}

/*=== GRID LAYOUT ===*/

/*CONSCIOUS WELLBEING TREND*/
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(2){ grid-area: 2 / 1 / 3 / 2; }
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(3){ grid-area: 1 / 2 / 2 / 3; }
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(4){ grid-area: 2 / 2 / 3 / 3; }
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(5){ grid-area: 1 / 1 / 2 / 2; }

/*EXPANDING REALITY TREND*/

.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(2){ grid-area: 1 / 2 / 2 / 3; }
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(3){ grid-area: 2 / 1 / 3 / 2; }
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(4){ grid-area: 1 / 1 / 2 / 2; }
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(5){ grid-area: 2 / 2 / 3 / 3; }

/*COLLECTIVE BELONGING*/
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(2){ grid-area: 2 / 1 / 3 / 2; }
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(3){ grid-area: 1 / 1 / 2 / 2; }
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(4){ grid-area: 2 / 2 / 3 / 3; }

/*BETTERMENT BRANDS*/
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(2){ grid-area: 2 / 2 / 3 / 3; }
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(3){ grid-area: 1 / 1 / 2 / 2; }
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(4){ grid-area: 1 / 2 / 2 / 3; }


/*=== VIDEO POSITION ===*/
.trend-year .canvasWrapper:nth-child(2) video{right: 0; top: 0;}
.trend-year .canvasWrapper:nth-child(3) video{bottom: -5px; left: -5px;}
.trend-year .canvasWrapper:nth-child(4) video{bottom: 0; right: 0;}
.trend-year .canvasWrapper:nth-child(5) video{top: -5px; left: -5px;}

/*CONSCIOUS WELLBEING TREND*/
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(4) video{bottom: auto;top: 5px;left: 5px;right: auto;}
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(5) video{top: auto; left: auto; bottom: 5px; right: 5px;}
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(4) .boxWrapper::before{top: 0;left: -21px;right: auto;bottom: auto;rotate: 90deg;}
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(5) .boxWrapper::before{top: 0; left: auto; right: 100%; rotate: 90deg;}

/*EXPANDING REALITY TREND*/
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(3) video{bottom: auto;left: auto;top: 5px;right: 5px;}
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(3) .boxWrapper::before{top: 0;right: 100%;bottom: auto;left: auto;rotate: 90deg;}

/*COLLECTIVE BELONGING*/
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(3) video{bottom: 5px;left: auto;top: auto;right: 5px;}
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(4) video{bottom: auto;right: auto;top: 5px;left: 5px;}
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(3) .boxWrapper::before,
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(4) .boxWrapper::before{top: 0;left: -21px;rotate: 90deg;}

/*BETTERMENT BRANDS*/
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(2) video{right: auto;top: 5px;bottom: auto;left: 5px;}
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(3) video{bottom: 5px;left: auto;top: auto;right: 5px;}
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(4) video{bottom: 5px;right: auto;left: 5px;top: auto;}
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(3) .boxWrapper::before,
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(4) .boxWrapper::before{left: -21px; rotate: 90deg;}

/*BOX POSITION*/
.trend-year .canvasWrapper:nth-child(2) .boxWrapper{top: 50%;right: 50%;}
.trend-year .canvasWrapper:nth-child(3) .boxWrapper{transform: scaleX(-1)}
.trend-year .canvasWrapper:nth-child(3) .boxWrapper .innerBoxWrapper,.trend-year .canvasWrapper:nth-child(5) .boxWrapper .innerBoxWrapper{transform: scaleX(-1);}
.trend-year .canvasWrapper:nth-child(5) .boxWrapper{transform: scaleX(-1);}
.trend-year .canvasWrapper > div{height: 100%; width: 100%; position: relative;}

.trend-year .statsDetails > span:first-child{margin-right: 13px;}

.trend-year .boxWrapper .expandIcon{position: absolute;top: 5px;right: 5px}
.trend-year .pinArrow{position: absolute;left: -20px;top: 0}
.trend-year .boxWrapper{background: rgba(255, 255, 255, 0.6);backdrop-filter: blur(6px);padding: 16px;position: absolute;
/*top: 50%;left: auto;transform: translateX(150px);*/
pointer-events: all; z-index: 1;}
.trend-year .countryName{color: var(--text-color);}
.trend-year .statsDetails{color: var(--text-color);}
.trend-year .imgWrapper{max-width: 70px;}
.trend-year .innerBoxWrapper{gap: 20px;}
.trend-year .modal_poup{background: rgba(255, 255, 255, 0.70);padding: 16px;position: absolute;width: 100%;top: 60%;transform: translateY(-50%);max-width: 700px;display: none}
.trend-year .closePopup{position: absolute;width: 26px !important;height: 26px;right: 20px;padding: 0 !important;top: 20px}
.trend-year div[id^="popup_"] {display: none;}

.trend-year .canvasAnimationAppSection.loading:before{content: "";background-image: url('/~/media/Images/D/Diageo-V2/Diageo-Corp/map-interactive/loader-svg.svg');background-repeat: no-repeat;background-position: center;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.trend-year .canvasAnimationAppSection.loading:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: transparent;}
.trend-year .nav-tabs{display: flex; list-style-type: none; gap: 13.4rem; padding: 0; margin: 0; padding-top: 3rem;}
.trend-year .nav-tabs button{background: transparent; border: 0; color: var(--white);}
.trend-year .nav-tabs::before {content: '';position: absolute;height: 1px;width: calc(100% - 45px);background: var(--white);top: 14px;left: 22px;}
.trend-year .nav-tabs .nav-item{position: relative;}
.trend-year .nav-tabs .nav-link.active::before {content: '';height: 2rem;width: 2rem;position: absolute;display: inline-block;border-radius: 50%;background: var(--white);left: 50%;transform: translateX(-50%);top: -25px;}
.trend-year .nav-tabs .nav-item::before {content: '';position: absolute;height: 20px;width: 1px;top: 0px;left: 0;background: var(--white);display: inline-block;top: -25px;left: 50%;transform: translateX(-50%);}
.trend-year .canvasWrapper .boxWrapper::before{content: '';position: absolute;height: 21px;width: 21px;display: inline-block;top: 0;right: -21px;background: var(--text-color);clip-path: polygon(100% 0, 0 0, 0 100%);}

@media screen and (max-width: 1199.98px) {
.trend-year .canvasWrapper:nth-child(4){margin-left: 0}
.trend-year #canvasAnimationforYears .canvasWrapperOuter,.trend-year .tab-panes{min-height: 60rem;}
}
@media screen and (max-width: 991px) {
.trend-year #canvasAnimationforYears .canvasWrapperOuter,.trend-year .tab-panes{min-height: 50rem;}
.trend-year .nav-tabs{justify-content: space-between;gap: 0}
.trend-year .canvasWrapper .boxWrapper::before,
.trend-year .canvasWrapper:nth-child(2) .boxWrapper::before,
.trend-year .canvasWrapper:nth-child(3) .boxWrapper::before,
.trend-year .canvasWrapper:nth-child(4) .boxWrapper::before,
.trend-year .canvasWrapper:nth-child(5) .boxWrapper::before
{content: '';position: absolute;height: 21px;width: 21px;display: inline-block;top: -10.5px;background: var(--text-color);clip-path: polygon(100% 0, 0 0, 0 100%);rotate: 45deg;right: 12px;}
.trend-year .canvasWrapper:nth-child(2) .boxWrapper{right: 10%;}
}

@media screen and (max-width: 768px) {
.trend-year #canvasAnimationforYears .nav.nav-tabs{width: 100%}
.trend-year .boxWrapper{padding: 12px;max-width: fit-content; height: fit-content;}
.trend-year #canvasAnimationforYears .canvasWrapperOuter,.trend-year .tab-panes{min-height: 40rem;}
.trend-year .canvasWrapper:nth-child(3) video{translate: 0;}
.trend-year .canvasWrapper:nth-child(4) video{translate: 0;}
.trend-year .canvasWrapper:nth-child(5) video{translate: 0;}


.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(5) .boxWrapper::before {top: -1rem;left: 1.2rem;rotate: 45deg;}
.trend-year .trend-year--app[trends="consciousWellbeing"] .canvasWrapper:nth-child(4) .boxWrapper::before{top: -10px;left: 12px;right: auto;bottom: auto;rotate: 45deg;}

.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(3) .boxWrapper::before{top: -10px;left: 12px;bottom: auto;right: auto;rotate: 45deg;}
.trend-year .trend-year--app[trends="expandingReality"] .canvasWrapper:nth-child(2) .boxWrapper::before{left: 40%;top: -10px;}

.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(4) .boxWrapper::before {top: -10px;rotate: 45deg;left: 5px;}
.trend-year .trend-year--app[trends="collectiveBelonging"] .canvasWrapper:nth-child(3) .boxWrapper::before {top: -10px;rotate: 45deg;left: 12px;}

.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(3) .boxWrapper::before {left: 35px;rotate: 45deg;}
.trend-year .trend-year--app[trends="bettermentBrands"] .canvasWrapper:nth-child(4) .boxWrapper::before{left: 3rem; rotate: 45deg;}


}

@keyframes rotate{from{rotate: 0deg}to{rotate: 360deg}}
@keyframes glowEffect{0%{filter: blur(2px) brightness(1.2)}50%{filter: blur(4px) brightness(1.6)}100%{filter: blur(2px) brightness(1.2)}}
@keyframes moveEffect{0%{transform: translate(0, 0)}25%{transform: translate(20px, -20px)}50%{transform: translate(0, 20px)}75%{transform: translate(-20px, -20px)}100%{transform: translate(0, 0)}}
.countryName.body-sm{font-weight:700;}
.trend-year video{transition: rotate 4s linear, opacity 2s linear; position: absolute;}