/*Scrollbar Styles*/
/*=================*/

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--light-gray);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(var(--rgb-green), 0.8);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

.bodyL{
    font-size: 20px;
    font-style: normal;
    line-height: normal;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    color: var(--gray);
}

h1, .heading-1{
    font-size: 55px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

h2, .heading-2{
    font-size: 50px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

h3, .heading-3{
    font-size: 40px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

h4, .heading-4{
    font-size: 25px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

h5, .heading-5{
    font-size: 22px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

h6, .heading-6{
    font-size: 20px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

/*Font Style Classes*/

.capsS{
    font-size: 15px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 400;
    line-height: normal;
}

.noCapsS{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.capsM{
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-style: normal;
    font-weight: 500;
}

.noCapsM{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

a{
    text-decoration: none;
}

.logo img{
    height: 100%;
    max-width: 100px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.navbar-custom{
    padding: 0;
    transition: all 0.3s ease;
    background: var(--white);
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

#topNav a{
    color: var(--black);
    padding: 23px 0 5px 0;
}



#topNav a:hover{
    color: var(--green);
}

#topNav a.active {
    color: var(--light-green);
    border-bottom:2px solid var(--light-green);
}


#topNav ul.navbar-nav > li:last-child a {
    position: relative;
    padding: 23px 20px;
    color: white;
    border-radius: 100px;
    border: 1px solid var(--green);
    transition: color 0.3s ease, border-color 0.3s ease;
    -webkit-transition: color 0.3s ease, border-color 0.3s ease;
    -moz-transition: color 0.3s ease, border-color 0.3s ease;
    -o-transition: color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    z-index: 0;
    background:var(--green);

}
#topNav ul.navbar-nav > li:last-child a:hover{
    border: 1px solid var(--light-green);
    background:var(--light-green);
    transition: background-color 0.3s ease, width 0.3s ease;
    -webkit-transition: background-color 0.3s ease, width 0.3s ease;
    -moz-transition: background-color 0.3s ease, width 0.3s ease;
    -o-transition: background-color 0.3s ease, width 0.3s ease;
}

/*#topNav ul.navbar-nav > li:last-child a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    border-radius: 100px;
    z-index: -1;
    transition: background-color 0.3s ease, width 0.3s ease;
    -webkit-transition: background-color 0.3s ease, width 0.3s ease;
    -moz-transition: background-color 0.3s ease, width 0.3s ease;
    -o-transition: background-color 0.3s ease, width 0.3s ease;
    pointer-events: none;
}


#topNav ul.navbar-nav > li:last-child:hover a::after,
#topNav ul.navbar-nav > li:last-child a:hover::after {
    background-color: var(--light-green);
    width: 100%;
}


#topNav ul.navbar-nav > li:last-child:hover a,
#topNav ul.navbar-nav > li:last-child a:hover {
    color: var(--white);
    border: 1px solid var(--light-green);
}*/

.topNavBarWrap{
    background: var(--white);
    padding: 20px 50px;
    transition: all 0.3s linear;
    background: var(--white);
    -webkit-transition: all 0.3s linear; /* Safari */
    -moz-transition: all 0.3s linear; /* Firefox older versions */
    -o-transition: all 0.3s linear; /* Opera */
}

.navbar-custom.scrolled .topNavBarWrap{
    padding: 10px 50px;
    border-bottom: 1px solid var(--light-gray);
}

.navbar-custom.scrolled .logo img{
    max-width: 100px;
}

.headerBtn{
    display: flex;
    gap: 10px;
    background-color: var(--green);
    padding: 20px 29px;
    color: var(--white);
    text-transform: uppercase;
    border-radius: 100px;
    align-items:center;
    justify-content: center;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
    height: 64px;
}

.headerBtn:hover{
    color: var(--white);
    background-color: rgba(var(--rgb-green), 0.9);
}

.headerBtn.location{
    width: 64px;
}

body main{
    padding-top: var(--header-height, 174px);
}

body:has(.scrolled) main{
    padding-top: 112px;
}

#megaMenu{
    width:100%;
    min-height: 300px;
    border-radius: 50px 50px 0 0;
    background-image: url("../images/megaMenuBG.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    z-index: -1;
    top: calc(var(--menu-height) * -1 - 20px); /* Using CSS variable with extra offset */
    left: 0;
    margin-left: 50px;
    max-width: calc(100% - 98px);
    display: none;
    transition: top 0.5s;
}

.submenuTitle, .subSubmenuTitle{
    display:none;
}

.submenu li a span:last-child, .subSubMenu li a span:last-child{
    padding-right:0 !important;
}

#megaMenu .firstCol{
    border-right: 1px solid rgba(var(--rgb-green), 0.3);
    min-height: 100%;
    padding-top: 60px;
    padding-bottom: 100px;
}

#megaMenu .secondCol, #megaMenu .thirdCol{
    border-right: 1px solid rgba(var(--rgb-green), 0.3);
    padding-top: 60px;
    padding-bottom: 100px;
}

#megaMenu ul{
    list-style-type: none;
    padding-left: 0;
}

#megaMenu .submenu, #megaMenu .subSubMenu{
    display: none;
}

#megaMenu #subMenuContainer .submenu, #megaMenu #subSubMenuContainer .subSubMenu{
    display: block;
}

#megaMenu a{
    color: var(--black);
}

#megaMenu a span:last-child img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

#megaMenu a span:last-child{
    padding-right: 40px;
}

#megaMenu li:has(.active){
    background-color: rgba(var(--rgb-green), 0.12);
    font-weight: 600;
    letter-spacing: -0.4px;
}



#megaMenu li:has(a:hover){
    background-color: rgba(var(--rgb-green), 0.12);
}

#megaMenu li:hover{
    background-color: rgba(var(--rgb-green), 0.12);
}

#megaMenu li{
    padding: 10px 0;
    cursor: pointer;
}

#megaMenu li a{
    margin-left: 50px;
    font-size: 25px;
    display: block;
    line-height:35px;
}

.submenuTitle, .subSubmenuTitle{
    font-weight: 600;
    margin: 0 0 0 50px;
    line-height: 1.5;
    padding: 10px 0;
}

#megaMenu .submenu li a {
    margin-right: 40px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

.button1 span, .button2 span, .button3 span, .button4 span{
    z-index: 1;
}

.buttonsWrap {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.button1, .button2, .button3, .button4 {
    position: relative; /* Add relative positioning to contain the pseudo-element */
    display: inline-flex;
    padding: 20px 29px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transition: color 0.3s ease, border-color 0.3s ease;
    -webkit-transition: color 0.3s ease, border-color 0.3s ease; /* Safari */
    -moz-transition: color 0.3s ease, border-color 0.3s ease; /* Firefox older versions */
    -o-transition: color 0.3s ease, border-color 0.3s ease; /* Opera */
    gap: 10px;
    overflow: hidden; /* Ensure the pseudo-element stays within the button bounds */
    height: fit-content;
}

.button1::after, .button2::after, .button3::after, .button4::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 0;
    height: calc(100% + 6px);
    border-radius: 100px;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease; /* Safari */
    -moz-transition: width 0.3s ease; /* Firefox older versions */
    -o-transition: width 0.3s ease; /* Opera */
    z-index: 0; /* Ensure the pseudo-element is behind the text */
}

.button1 {
    color: var(--green);
    background-color: var(--white);
    border: 1px solid var(--white);
}

.button1::after {
    background-color: var(--green);
}

.button1:hover {
    color: var(--white);
    background-color: var(--green);
    transition: background-color 0s ease 0.3s;
    border: 1px solid var(--white);
}

.button1:hover::after, .button2:hover::after, .button3:hover::after, .button4:hover::after {
    width: calc(100% + 6px);
}

.button2 {
    color: var(--green);
    background-color: var(--white);
    border: 1px solid var(--green);
}

.button2::after {
    background-color: var(--green);
}

.button2:hover {
    color: var(--white);
    background-color: var(--green);
    transition: background-color 0s ease 0.3s;
    border: 1px solid var(--green);
}

.button3 {
    color: var(--white);
    background-color: var(--green);
    border: 1px solid var(--green);
}

.button3::after {
    background-color: var(--light-green);
}

.button3:hover {
    color: var(--white);
    background-color: var(--light-green);
    transition: background-color 0s ease 0.3s;
    border: 1px solid var(--light-green);
}

.button4 {
    color: var(--white);
    background-color: transparent;
    border: 1px solid var(--white);
}

.button4::after {
    background-color: var(--green);
}

.button4:hover {
    color: var(--white);
    background-color: var(--green);
    transition: background-color 0s ease 0.3s;
    border: 1px solid var(--green);
}

.button1 .icon, .button2 .icon, .button3 .icon, .button4 .icon {
    position: relative; /* Ensure icons are above the pseudo-element */
    display: block;
    aspect-ratio: 1;
    width: 29px;
    height: 29px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
    z-index: 1; /* Ensure icons are above the pseudo-element */
}

.button1 .icon {
    background-image: url("../images/icon_right.svg");
}

.button1:hover .icon {
    background-image: url("../images/icon_right_2.svg");
}

.button2 .icon {
    background-image: url("../images/icon_right_4.svg");
}

.button2:hover .icon {
    background-image: url("../images/icon_right_2.svg");
}

.button3 .icon {
    background-image: url("../images/icon_right_2.svg") !important;
}

.button3:hover .icon {
    background-image: url("../images/icon_right_3.svg");
}

.button4 .icon {
    background-image: url("../images/icon_right_5.svg");
}

.button4:hover .icon {
    background-image: url("../images/icon_right_2.svg");
}



#preloader-content {
    position: absolute;
    z-index: 10; /* Ensure the logo is above the mask */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
}

#logo {
    width: 150px;
    height: auto;
}

#mask-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* Apply CSS transition to the circle */
#hole-mask circle {
    transition: r 2s;
}

.hero{
    position: relative;
    margin-left: 50px;
    margin-right: 50px;
    min-height: 75vh;
    margin-bottom: 9.5%;
}

.hero .contentWrap .content p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.hero .mainRow{
    min-height: 75vh;
}

.hero .video-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero .mask{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    mask-image: url("../images/hero_mask.webp");
    mask-size: cover;
    mask-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    mask-position: center bottom;
    z-index:-1;
    pointer-events: none; /* Prevent interactions */
}

.hero video, .hero .video-overlay{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    mask-image: url("../images/hero_mask.webp");
    mask-size: cover;
    mask-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    mask-position: center bottom;
    object-fit: cover;
    z-index:-1;
    pointer-events: none; /* Prevent interactions */
}

.hero .contentWrap{
    margin-left: 55px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 50px 50px;
    background-color: rgba(var(--rgb-green), 0.7);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    gap: 38px;
}

.contentWrap h1{
    font-size:50px;
}

p:last-child{
    margin-bottom: 0;
}

.productCard .mediaWrap{
    aspect-ratio:  277.628 / 201.01;
    max-width: calc(100% - 28px);
    border-radius: 18px;
    overflow: hidden;
    display: block;
}

.productCard img, .productCard video{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.productCard video{
    display: block;
}

.productCard a:hover video{
    transform: scale(1.1);
}

.productCard video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.productCard a:hover .content{
    color: var(--green);
}

.productCard a:hover .mediaWrap img{
    transform: scale(1.1);
}

.productCard a:hover .underline-hover::after{
    transform: scaleX(1);
    transform-origin: left;
}

.productCard .mediaWrap img{
    width: 100%;
    height: auto;
    display: block;
}

.productCard .content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.productCard .content{
    min-height: 4.5em;
}

.productCard .title{
    flex: 1;
}

.productCard{
    border-left: 1px solid var(--light-gray);
}

.productCard h4{
    line-height: 1.5;
}

.our-products .productsRow{
    margin-top: 100px;
    row-gap: 1.5rem;
}

.productCard .iconWrap img{
    height: 26px;
    width: 26px;
}

.headerPostCard .imageWrap{
    border-radius: 30px;
    aspect-ratio: 372 / 211.24;
    object-fit: cover;
    overflow: hidden;
}

.headerPostCard img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.headerPostCard .content{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.headerPostCard a .content p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.headerPostCard a .content{
    color: var(--gray);
}

.headerPostCard a{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.headerPostCard a:hover img{
    transform: scale(1.1);
}

.headerPostCard a:hover .content{
    color: var(--green);
}

.fancybox__container:has(#localeSettings) .carousel__button{
    display: none;
}

#localeSettings{
    border-radius: 50px 50px 0 50px;
    background-color: #E5EDEB;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    mask-image: url("../images/megaMenuBG.svg");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: bottom right;
}

#select2-select-country-results .select2-results__option {
    float: left;
    width:50%;
}

.text-image{
    padding-bottom: 14%;
}

.text-image .mediaWrap{
    border-radius: 50px;
    object-fit: cover;
    overflow: hidden;
    position: sticky;
    top: 130px;
}

/*.has-growing-animation{*/
/*    transform: scale(0);*/
/*}*/

.text-image .mediaWrap img, .text-image .mediaWrap video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.text-image .customGap{
    row-gap: 3rem;
}

.text-image .contentWrap{
    display: flex;
    flex-direction: column;
    gap: 44px;
    max-width: 587px;
}

.image-text{
    padding-bottom: 14%;
}

.image-text .mediaWrap{
    border-radius: 50px;
    object-fit: cover;
    overflow: hidden;
    position: sticky;
    top: 130px;
}

.image-text .mediaWrap img, .image-text .mediaWrap video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.image-text .customGap{
    row-gap: 3rem;
}

.image-text .contentWrap{
    display: flex;
    flex-direction: column;
    gap: 44px;
    max-width: 587px;
}

/*.growing-animation {*/
/*    width: 100%; !* Set full width *!*/
/*    height: 100%; !* Set full height *!*/
/*    transform: scale(0); !* Start with scale 0 *!*/
/*    transform-origin: center bottom; !* Adjust the origin as needed *!*/
/*    animation: grow 1s forwards;*/
/*}*/

.results{
    padding-bottom: 9%;
}

.articleCard .line {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 9px;
    background-color: #005336;
    transition: background-color 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
}

.articleCard .line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #0EC584;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-in-out;
}

.articleCard .article--wrapper:hover .line::after {
    transform: scaleX(1);
}

.results .articlesRow{
    margin-top: 8%;
    row-gap: 60px;
}

.articleCard .article--wrapper{
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.articleCard .article--wrapper .contentWrap{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.articleCard .icon img{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
    width: 26px;
    height: 26px;
}

.articleCard .article--wrapper:hover .icon img{
    transform: scale(1.1);
}

.articleCard .article-date {
    margin-bottom: 25px;
}

.articleCard .contentWrap h5 a {
    color: var(--gray)!important;
    transition: all 0.3s ease;
}

.articleCard .contentWrap h5 a:hover {
    color: var(--green)!important;
}

.articleCard .article-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
    color: var(--gray);
    margin-top: auto;
}

.articleCard .article-categories, .article-page-categories.article-categories {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.articleCard .article-category, .article-page-categories .article-category {
    font-size: 15px;
    display: inline-flex;
    text-transform: uppercase;
    color: var(--light-green)!important;
    transition: color 0.3s ease;
}

.articleCard .article-category:hover, .article-page-categories .article-category:hover {
    color: var(--green)!important;
}

.articleCard .article-button {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    transition: all 0.3s ease;
}

.articleCard .article-button:hover {
    color: var(--light-green)!important;
}

.articlesSwiper .swiper-slide{
    height: auto!important;
}

.articlesSwiper .swiper-slide .articleCard{
    height: 100%!important;
}

.f-w-500{
    font-weight: 500;
}

.f-s-15{
    font-size: 15px;
}

.f-s-16{
    font-size: 16px;
}

.f-w-600{
    font-weight: 600;
}

@keyframes grow {
    0% {
        transform: scale(0); /* Start at scale 0 */
    }
    100% {
        transform: scale(1); /* End at scale 1 (full size) */
    }
}


@keyframes scrollUpDown {
    0% {
        transform: translateX(-50%) translateY(-65%);
    }
    50% {
        transform: translateX(-50%) translateY(-70%);
    }
    100% {
        transform: translateX(-50%) translateY(-65%);
    }
}

.scroll-down {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-65%);
    background: transparent;
    border: none;
    animation: scrollUpDown 2s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-down img{
    vertical-align: unset;
    width: 100%;
    height: 100%;
}

.our-products{
    padding-bottom: 14%;
}

.richeditorBlock .accented-rich{
    background-color: var(--light-gray-2);
    color: var(--gray);
}

.richCtaWithVideo{
    padding-top: 9%;
    margin-bottom: var(--rich-cta-margin-bottom);
}

.richCtaWithVideoSpacer{
    padding-bottom: 9%;
}

.richCtaWithVideo .contentWrap{
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 10%;
    gap: 60px;
}

.richCtaWithVideo .contentWrap .content h3{
    -webkit-background-clip: text;
    color: transparent;
}

.richCtaWithVideo .mediaWrap{
    border-radius: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1301 / 627.05;
    margin-bottom: -21%;
    padding: 45px 55px 45px 55px;
}

.richCtaWithVideo .itemsWrap{
    border-radius: 25px;
    overflow: hidden;
}

.richCtaWithVideo .itemsWrap .item{
    background-color: var(--green);
    width: 211px;
    aspect-ratio: 211 / 171.86;
    position: relative;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.richCtaWithVideo .itemsWrap .item:has(a:hover) .overlay{
    opacity: 1;
}

.richCtaWithVideo .itemsWrap .item:has(a:hover){
    background-color: rgba(var(--rgb-green), 0.9);
}

.richCtaWithVideo .itemsWrap .item a .icon img{
    display: block;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.richCtaWithVideo .itemsWrap .item a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    padding: 20px 30px;
    position:relative;
}

.richCtaWithVideo .itemsWrap .item a:hover{
    color: var(--white);
}

.richCtaWithVideo .itemsWrap .item .overlay{
    height: 100%;
    width: 100%;
    display: block;
    z-index: 0;
    position: absolute;
    opacity: 0.8;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.fancybox__backdrop{
    background: rgba(var(--rgb-black), 0.7);
}

.fancybox__content .carousel__button{
    justify-content: end;
}

.fancybox__content :focus:not(.carousel__button.is-close){
    outline: none;
}

.fancyVideo .imageWrap{
    border-radius: 50%;
    overflow: hidden;
}

.fancyVideo .circle{
    background-color: rgba(var(--rgb-white), 0.5);
    backdrop-filter: blur(2px);
    width: 60px;
    border-radius: 50%;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.fancyVideo .imageWrap .circle img{
    width: 25px;
    height: 25px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease; /* Safari */
    -moz-transition: all 0.3s ease; /* Firefox older versions */
    -o-transition: all 0.3s ease; /* Opera */
}

.fancyVideo .imageWrap img{
    width: 92px;
    height: 92px;
}

.fancyVideo:hover .circle img{
    transform: scale(1.1);
}

footer .logo img{
    filter: brightness(0) invert(1);
}

footer{
    padding-top: 65px;
}

footer .linksWrap .linksItem a, footer .linksWrap .linksItem div{
    color: white;
    font-size: 18px;
    font-weight: 300;
}

footer .linksWrap .linksItem a:hover {
    text-decoration: none;
}

footer .linksWrap .linksItem span:last-of-type{
    flex: 1;
}

footer .socials{
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

footer .socials img{
    display: block;
    width: 25px;
    height: auto;
    filter: brightness(0) invert(1);
}

footer .socials .item a{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid var(--white);
}

footer #widget-1 .buttonsWrap{
    margin-top: 60px;
}

footer .bottomFooter{
    margin-top: 65px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid var(--white);
    font-size: 13px;
}

footer .bottomFooter a{
    color: var(--white);
}

footer .bottomFooter .leftCol a{
    text-decoration: underline;
}

footer #widget-2, footer #widget-3{
    display: flex;
    flex-direction: column;
    gap: 28px;
}

footer #widget-2 .links a, footer #widget-3 .links a{
    color: white;
    font-size: 18px;
    font-weight: 300;
}

footer #widget-2 .links, footer #widget-3 .links{
    max-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

footer #widget-4 form{
    display: flex;
    flex-direction: column;
    /*gap: 29px;*/
}

footer #widget-4 form  .heading-5{
    margin-bottom: 29px;
}

footer #widget-4 form  .privacy-policy{
    margin-top: 14px;
    font-size: 13px;
}

footer #widget-4 .subscription-container{
    display: flex;
    flex-direction: column;
    gap: 19px;
}

footer #widget-4 .subscription-container .inputWrap{
    border-radius: 200px;
    overflow: hidden;
    border: 1px solid var(--white);
    justify-content: space-between;
    display: flex;
    gap: 10px;
    padding: 8px;
}

.subscription-form input[type="email"] {
    padding: 10px 0 10px 15px;
    border: none;
    outline: none;
    width: 160px;
    background-color: var(--green);
    caret-color: var(--white);
}

.subscription-form input[type="email"]::placeholder, .subscription-form input[type="email"]{
    color: var(--white);
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.subscription-container{
    container-type: inline-size;
}

.subscription-form button{
    padding: 15px 18px;
    font-size: 13px;
    line-height: 1;
}

footer .container {
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:1400px){
    .md-custom-gap{
        gap: .5rem !important;
    }
}

@media screen and (max-width: 1200px) {
    body {
        font-size: 17px;
    }

    #topNav a {
        font-size: 13px;
    }

    .topNavBarWrap {
        padding: 20px;
    }

    .contentWrap h1 {
        font-size: 45px;
    }

    h1, .heading-1 {
        font-size: 50px;
    }

    h2, .heading-2 {
        font-size: 45px;
    }

    h3, .heading-3 {
        font-size: 35px;
    }

    h4, .heading-4 {
        font-size: 24px;
    }

    h5, .heading-5 {
        font-size: 20px;
    }

    h6, .heading-6 {
        font-size: 18px;
    }

    .navbar .dropdown-menu .nav-link.has-icon::before {
        width: 33px!important;
        height: 32px!important;
    }
}
@media screen and (max-width: 768px) {


    body {
        font-size: 16px;
    }

    h1, .heading-1{
        font-size: 40px;
    }

    h2, .heading-2{
        font-size: 38px;
    }

    h3, .heading-3{
        font-size: 32px;
    }

    h4, .heading-4{
        font-size: 22px;
    }

    h5, .heading-5{
        font-size: 19px;
    }

    h6, .heading-6{
        font-size: 18px;
    }

    .position-fold-inner-text{
        left:25px !important;
    }

    .padding-right-text p{
        padding-right:0;
    }

    .padding-right-text{
        margin-bottom:40px;
    }

    .timeline{
        height:auto !important;
    }

    #timelineAccordion .accordion-button-header{
        padding:25px;
    }

    .accordion-button-footer-wrapper .accordion-button::after{
        margin-left:-21px !important;
    }

}

@container (max-width: 348px) {

    .subscription-container .inputWrap{
        flex-direction: column;
        align-items: start;
        border-radius: 0 !important;
        border: none !important;
    }

    .subscription-container .inputWrap input{
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 10px !important;
        border-bottom: 1px solid white !important;
    }

    .subscription-container button{
        align-self: end !important;
    }

}

.video-section video {
    width: 100%;
    border-radius: 50px;
}

.field-wrap input:not([type="checkbox"]), .field-wrap textarea {
    border: 1px solid var(--green)!important;
    border-radius: 12px;
    padding: 16px;
}

.iframeBlock iframe{
    background-color: var(--green);
    border-radius: 30px;
    padding: 3% 4%;
}

.coming-soon-section{
    min-height: calc(100svh - 110px);
    height: auto;
    position: relative;
    background-blend-mode: overlay;
    background: rgba(0, 0, 0, .1);
    background-image: url(../images/hero_bg.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coming-soon-section .contentWrap{
    padding: 50px 74px;
    background-color: rgba(var(--rgb-green), 0.7);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
}

.coming-soon-section .contentWrap a{
    color: white;
}

.coming-soon-section .contentWrap div {
    margin-top: 20px;
}

.coming-soon-section .underline-hover::after, .coming-soon-section .underline-hover-black::after {
    background-color: white;
}

.sharethis-inline-share-buttons {
    display: flex!important;
    align-items: center;
}

#page-article main {
    padding-top: calc(var(--header-height, 174px) + 70px);
}

@media (min-width: 992px) {
    #page-article .richeditorBlock.spacing-bottom-lg-100 {
        padding-top: 40px!important;
    }
}


.multipleColumnsSwiper .columnCard {
    height: auto;
}
.multipleColumnsSwiper .columnCard .columnItems {
    height: 100%;
}

.richCtaWithVideoSpacer:empty{
    padding:0;
}

.field-wrap label:has(input[type="checkbox"]){
    display:inline-block !important;
}

.quote-light-green{
    color:var(--light-green);
    margin-top:-20px;
    font-weight:300;
}

.counter-heading{
    font-size: 50px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.2;
}

.icon-card-styling{
    background-color: #EDFFF8;
    border:1px solid rgba(var(--rgb-green),0.3);
    padding:20px;
    border-radius:20px;
}

#video-block-4{
    margin-bottom:100px;
}

.flex-icon-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -10px;
    margin-right: -10px;
}
.flex-icon-col {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 24px;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 576px) {
    .flex-icon-col { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
    .flex-icon-col { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 992px) {
    .flex-icon-col { flex: 0 0 20%; max-width: 20%; }
}

.custom-bg{
    background:#EDFFF8;
}

.custom-styling{
    padding:10px 20px 20px 20px;
}

.custom-category-styling{
    background:white;
    color:var(--green);
    border-radius:100px;
    padding:5px 10px;
    text-transform: uppercase;
    font-size: 15px;
}



/*New Navigation Menu */
.navbar .dropdown > .dropdown-menu {
    background-color: #F5F8F7;
    border: none;
    filter: drop-shadow(0 6px 10px rgba(104, 102, 102, 0.25));
    width: 300px;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.navbar .dropdown .dropdown-toggle::after {
    display: none;
}
.navbar .dropdown-menu .nav-link {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150.007%;
    padding: 20.5px 22px!important;
    text-transform: initial;
    position: relative;
}
.navbar .dropdown .nav-link.show {
    text-shadow: 0 0 0.9px #005336;
    color: #005336!important;
}
.navbar .nav-link .dropdown-icon.dropdown-icon-opened,
.navbar .nav-link.show .dropdown-icon.dropdown-icon-closed {
    display: none;
}
.navbar .nav-link.show .dropdown-icon.dropdown-icon-opened,
.navbar .nav-link .dropdown-icon.dropdown-icon-closed {
    display: block;
}
.navbar .dropdown .dropdown-icon {
    width: 39px;
}
.navbar .dropdown-menu li .nav-link::after {
    content: '';
    display: block;
    position: absolute;
    height: 0.5px;
    width: calc(100% - 44px);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #005336;
    opacity: 0.3;
    border: none;
    margin: 0;
    vertical-align: middle;
}
.navbar .dropdown-menu > li:last-child .nav-link::after,
.navbar .dropdown .nav-link.show::after {
    display: none;
}
.navbar .dropdown-menu.dropdown-submenu > li:not(:last-child) .nav-link::after {
    display: block!important;
}
.navbar .dropdown-submenu {
    position: relative!important;
    background: rgba(0, 83, 54, 0.12);
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
.navbar .dropdown-submenu li .nav-link::after {
    height: 2px;
    background-color: #15B37C;
    opacity: 1;
}
.navbar .dropdown-toggle {
    white-space: wrap;
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
    0% {
        opacity: 0;
    }
}

@media screen and (max-width: 1200px) {
    .navbar .dropdown .dropdown-icon {
        width: 32px;
    }
}

@media screen and (max-width: 991.98px) {

    .position-fold-inner-text{
        max-width:85% !important;
    }

    .multipleColumns .productCard{
        margin-bottom:30px;
    }

    .multipleColumns .productCard .content{
        min-height: auto;
    }

    .topNavBarWrap {
        position: relative;
    }
    .navbar .navbar-toggler {
        border: none;
        background-color: #005336;
        border-radius: 100%;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2226%22%20viewBox%3D%220%200%2025%2026%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5419%2014.7216L18.3859%2020.5656C18.5807%2020.7538%2018.8416%2020.8579%2019.1125%2020.8555C19.3834%2020.8532%2019.6425%2020.7445%2019.834%2020.553C20.0255%2020.3615%2020.1342%2020.1024%2020.1365%2019.8315C20.1389%2019.5606%2020.0348%2019.2997%2019.8466%2019.1049L14.0026%2013.2609L19.8466%207.41698C20.0348%207.22214%2020.1389%206.96119%2020.1365%206.69033C20.1342%206.41947%2020.0255%206.16037%2019.834%205.96883C19.6425%205.7773%2019.3834%205.66865%2019.1125%205.6663C18.8416%205.66395%2018.5807%205.76807%2018.3859%205.95625L12.5419%2011.8002L6.69798%205.95625C6.50227%205.77272%206.24283%205.67254%205.97457%205.67689C5.7063%205.68125%205.45026%205.78981%205.26061%205.97959C5.07096%206.16937%204.96259%206.42549%204.95842%206.69376C4.95425%206.96203%205.05462%207.22139%205.23828%207.41698L11.0812%2013.2609L5.23725%2019.1049C5.13859%2019.2002%205.05989%2019.3141%205.00574%2019.4402C4.9516%2019.5662%204.92311%2019.7018%204.92191%2019.8389C4.92072%2019.9761%204.94686%2020.1121%204.9988%2020.2391C5.05074%2020.3661%205.12745%2020.4814%205.22445%2020.5784C5.32144%2020.6754%205.43678%2020.7521%205.56374%2020.804C5.6907%2020.856%205.82673%2020.8821%205.9639%2020.8809C6.10106%2020.8797%206.23662%2020.8512%206.36266%2020.7971C6.48869%2020.743%206.60268%2020.6643%206.69798%2020.5656L12.5419%2014.7216Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
        rotate: 45deg;
    }
    .navbar .navbar-toggler .navbar-toggler-icon {
        height: 25px;
        width: 25px;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2226%22%20viewBox%3D%220%200%2025%2026%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5419%2014.7216L18.3859%2020.5656C18.5807%2020.7538%2018.8416%2020.8579%2019.1125%2020.8555C19.3834%2020.8532%2019.6425%2020.7445%2019.834%2020.553C20.0255%2020.3615%2020.1342%2020.1024%2020.1365%2019.8315C20.1389%2019.5606%2020.0348%2019.2997%2019.8466%2019.1049L14.0026%2013.2609L19.8466%207.41698C20.0348%207.22214%2020.1389%206.96119%2020.1365%206.69033C20.1342%206.41947%2020.0255%206.16037%2019.834%205.96883C19.6425%205.7773%2019.3834%205.66865%2019.1125%205.6663C18.8416%205.66395%2018.5807%205.76807%2018.3859%205.95625L12.5419%2011.8002L6.69798%205.95625C6.50227%205.77272%206.24283%205.67254%205.97457%205.67689C5.7063%205.68125%205.45026%205.78981%205.26061%205.97959C5.07096%206.16937%204.96259%206.42549%204.95842%206.69376C4.95425%206.96203%205.05462%207.22139%205.23828%207.41698L11.0812%2013.2609L5.23725%2019.1049C5.13859%2019.2002%205.05989%2019.3141%205.00574%2019.4402C4.9516%2019.5662%204.92311%2019.7018%204.92191%2019.8389C4.92072%2019.9761%204.94686%2020.1121%204.9988%2020.2391C5.05074%2020.3661%205.12745%2020.4814%205.22445%2020.5784C5.32144%2020.6754%205.43678%2020.7521%205.56374%2020.804C5.6907%2020.856%205.82673%2020.8821%205.9639%2020.8809C6.10106%2020.8797%206.23662%2020.8512%206.36266%2020.7971C6.48869%2020.743%206.60268%2020.6643%206.69798%2020.5656L12.5419%2014.7216Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    }
    .navbar .navbar-collapse {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: #F5F8F7;
    }
    .navbar.scrolled .navbar-nav {
        height: calc(100svh - 91px);
    }
    .navbar .dropdown > .dropdown-menu {
        width: 100%;
    }
    .navbar-nav {
        height: calc(100svh - 117px);
        overflow-y: auto;
    }
    .navbar-nav .nav-link,
    .navbar .dropdown-menu .nav-link {
        padding: 18px 22px!important
    }
}

.innerHero{
    margin-left: 50px;
    margin-right: 50px;
    min-height: 75vh;
    margin-bottom: 9.5%;
    position: relative;
    border-radius: 50px;
}

.innerHero .mask{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    mask-image: url(../images/hero_mask.webp);
    mask-size: cover;
    mask-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    mask-position: center bottom;
    z-index: -1;
    pointer-events: none;
}

.innerHero .overlay{
    border-radius:50px;
}

.scroll-down-inner{
    bottom:-70px;
}

#video-block-{{ loop.index }} .video-wrapper {position: relative;display: inline-block;width: 100%;}
#video-block-{{ loop.index }} .video-wrapper video {width: 100%;height: auto;display: block;background: #000;}
#video-block-{{ loop.index }} .video-play-btn {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 90px;height: 90px;padding: 0;border: 0;background-color: transparent;background-image: url("../images/video-play.svg");background-repeat: no-repeat;background-position: center;background-size: contain;cursor: pointer;z-index: 3;transition: all 300ms ease-in-out;}
#video-block-{{ loop.index }} .video-play-btn::before {content: none !important;display: block;width: 0;height: 0;margin-left: 3px;border-left: 18px solid #fff;border-top: 12px solid transparent;border-bottom: 12px solid transparent;}
#video-block-{{ loop.index }} .video-play-btn:hover {transform: translate(-50%, -50%) scale(1.2);}
#video-block-{{ loop.index }} .video-wrapper.playing .video-play-btn {display: none;}

.position-fold-inner-text{
    top: 25%;
    left: 50px;
    max-width: 45%;
}

.break-word-custom{
    word-break: break-all;
}

.innerHero video{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    width: 100%;
    height: 100%;
    mask-image: url(../images/hero_mask.webp);
    mask-size: cover;
    mask-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    mask-position: center bottom;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

/* TIMELINE ACCORDION STYLING */

#timelineAccordion{
    border:0;
}

.timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid var(--light-green);
    height:100%;
}
.timeline-item {
    position: relative;
    margin-bottom: 40px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -37px;
    top: 0px;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid var(--light-green);
    border-radius: 50%;
}
#timelineAccordion .accordion-button-header:not(.collapsed) {
    background-color: var(--green);
    color: white;
}

#timelineAccordion .accordion-body {
    background-color: var(--light-gray-2);
}

#timelineAccordion .accordion-item{
    border:0;
}


.accordion-button-header{
    width:100%;
    border:0;
    background:var(--green);
    color:white;
    font-weight:300;
    font-size:28px;
    padding:25px 25px 25px 50px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.accordion-button-footer-wrapper{
    position:relative;
    background:var(--light-green);
    height:8px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

.accordion-button-footer-wrapper .accordion-button{
    position:absolute;
    padding:0;
    background:none;
    box-shadow:none;
}

.accordion-button-footer-wrapper .accordion-button::after{
    flex-shrink: 0;
    content: "";
    background-image: url(../images/arrow-white.svg);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
    position:absolute;
    left:50%;
    background-color:var(--light-green);
    background-position:center center;
    border-radius:100%;
    width:40px;
    height:40px;
    margin-left:-6px;
}

.accordion-button-footer-wrapper .accordion-button:not(.collapsed)::after{
    background-image: url(../images/arrow-white.svg);
    transform: var(--bs-accordion-btn-icon-transform);
}

#timelineAccordion .accordion-body{
    padding:40px 40px 0 40px;
    color:var(--green);
}

#timelineAccordion .accordion-item{
    margin-bottom:40px;
}

#timelineAccordion .accordion-item:last-child{
    margin-bottom:0;
}

.padding-right-text p{
    padding-right:30px;
    padding-bottom:40px;
}

.timeline-title{
    color:var(--light-green);
    position:relative;
    top:-5px;
}