/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); */
@font-face {
    font-family: 'Good Karma';
    src: url('../fonts/GoodKarmaSmooth-Regular.woff2') format('woff2'),
        url('../fonts/GoodKarmaSmooth-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Thin.woff2') format('woff2'),
        url('../fonts/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.woff2') format('woff2'),
        url('../fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
    --cLBlack: #000000;
    --cLWhite: #ffffff;
    --cLCharcoal: #1d1d1d;
    --cLMintPastel: #a7cbb8;
    --cLLimeYellow: #b7bf2b;
    --cLAvocadoGreen: #708e2b;
    --cLSteelBlueDark: #2a6285;
    --cLForestGreenDark: #00603c;
    --cLSoftYellow: #ffe6a0;
    --cLIndigoBlue: #41479b;
    --cLBeigeLight: #f9f1e8;
    --cLMintLight: #d7f1e6;
    --cLSandyBeige: #dcb686;
    --cLYellowOlive: #d4da65;
    --cLYellowLime: #d2da4d;
    --cLFuchsiaDeep: #a84d89;
    --cLTealStrong: #189f7f;
    --cLPeachSoft: #f9b97c;
    --cLRoseBeige: #e4caba;
    --cLCocoaCream: #c0a28f;
    --cLLightLime: #d3d965;
    --cLOrangeSoft: #f3a861;
    --cLMediumTeal: #4cad89;
    --cLOffWhitePeach: #fdf8f4;
    --cLMintBackground: #effaf6;
    --cLBlackTransparent13: rgba(0, 0, 0, 0.13);
    --cLWhiteSemiTransparent: rgba(255, 255, 255, 0.50);
    --cLMintBackgroundTransparent: rgba(239, 250, 246, 0.40);
    --gLTopToWhite: linear-gradient(0deg, var(--cLMintBackground) 0%, var(--cLWhite)100%);
    --gLBottomToMint: linear-gradient(180deg, var(--cLWhite) -25.69%, var(--cLMintBackground) 100%);
    --gLBottomToWhite: linear-gradient(180deg, var(--cLMintBackground) 0%, var(--cLWhite) 100%);
    --fs94: min(94px, 11vw);
    --fs84: min(84px, 10vw);
    --fs80: min(80px, 10vw);
    --fs69: min(69px, 7vw);
    --fs60: min(60px, 7vw);
    --fs55: min(55px, 7vw);
    --fs50: min(50px, 7vw);
    --fs48: min(48px, 7vw);
    --fs45: min(45px, 6.5vw);
    --fs43: min(43px, 6.5vw);
    --fs40: min(40px, 6.5vw);
    --fs38: min(38px, 5.8vw);
    --fs36: min(36px, 5.8vw);
    --fs34: min(34px, 5.8vw);
    --fs32: min(32px, 5.8vw);
    --fs30: min(30px, 5.8vw);
    --fs25: min(25px, 5.5vw);
    --fs24: min(24px, 5.5vw);
    --fs28: min(28px, 5.5vw);
    --fs22: min(22px, 5.5vw);
    --fs20: min(20px, 5.5vw);
    --fs19: min(19px, 5vw);
    --fs18: min(18px, 4.3vw);
    --fs16: min(16px, 4.2vw);
    --fs15: min(15px, 4vw);
    --fs14: min(14px, 4vw);
    --fs13: min(13px, 3.5vw);
    --fs12: min(12px, 3.3vw);

    --sp: min(1rem, 3vw);
    --sp1: min(2rem, 5vw);
    --sp2: min(2rem, 6vw);
    --sp3: min(3rem, 7vw);
    --sp4: min(4rem, 8vw);
    --sp5: min(5rem, 9vw);
    --sp6: min(6rem, 10vw);
    --sp7: min(7rem, 11vw);
    --sp8: min(8rem, 12vw);
    --sp9: min(9rem, 13vw);
    --sp10: min(10rem, 14vw);
    --sp11: min(11rem, 15vw);
    --sp12: min(12rem, 16vw);
    --sp13: min(13rem, 17vw);
    --sp14: min(14rem, 18vw);
    --sp15: min(15rem, 19vw);
    margin: 0;
    padding: 0;
    width: 100vw;
    font-weight: 400;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: var(--fs16);
    color: var(--cLCharcoal);
    font-family: "Poppins", sans-serif;
}
* {box-sizing:border-box;}
a:not([class^=btn-]):hover{color:var(--cLYellowOlive);}
a{color:inherit;text-decoration:none;outline:none;}
ul[class]{position:relative;list-style:none;margin:0;padding:0;}
ul:not([class]){display:flex;flex-direction:column;row-gap:.5rem;padding-left: min(1rem,4vw)}
ul:not([class])>li::marker{position:relative;font-size:inherit}
strong{font-weight:700}
:is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]){margin-block:0;font-weight:600;letter-spacing:0;line-height:1.2;font-family:inherit;text-transform:inherit;color:var(--cLTealStrong)}
:is(h1,h2,h3,h4,h5,h6):has(> [class*="ttl-"]),:is(h1,h2,h3,h4,h5,h6) > [class*="ttl-"] {line-height:.7;}
:is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) em:not(:is([class*="ttl-"],.karma)){font-family:inherit;text-transform:inherit;font-size:var(--fs30);font-weight:700;font-style:normal;line-height:.8;color:var(--cLCharcoal);}
/* :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) span {font-family:inherit;text-transform:inherit;font-size:inherit;font-weight:initial;} */
.ttl-80 {font-size:var(--fs80)}
h1,.ttl-48 {font-size:var(--fs48)}
h2,.ttl-40 {font-size:var(--fs40)}
h3,.ttl-32 {font-size:var(--fs32)}
h4,.ttl-28 {font-size:var(--fs28)}
h5,.ttl-22 {font-size:var(--fs22)}
h6,.ttl-19 {font-size:var(--fs19)}
h1 em {
    font-size: var(--fs38);
    font-weight: 600 !important;
}
.fs-20 {font-size:var(--fs20)}
.small {font-weight: 400 !important;}
:is(h1,h2,h3,h4,h5,h6):has( [class*=ttl-]){line-height:.9;margin-top:.7rem}
[class*="ttl-"] .ttl-190{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;line-height:0}
[class*="ttl-"]+.upper-ttl {display:block;margin-top:-1.5rem} 
.upper-ttl{font-size:min(24px,5vw);text-transform:uppercase;font-weight:200;}
[style^="--icn"]{display:flex;column-gap:.5rem;align-items:center}
[style^="--icn"]::before{position:relative;scale:2;content:"";padding:.7rem;display:block;transition:initial;pointer-events:none;background-color:currentcolor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:var(--icn);mask-image:var(--icn)}
[style^="--icn"]:not([class^=btn])::before{scale:1;padding:.625rem}
[class^=btn-]{z-index:1;line-height:1;font-weight:600;border-radius:.2rem;font-size:min(15px,3.7vw);display:block;width:max-content;padding:min(10px,4vw) min(10px,8vw);text-transform:uppercase;transition:.3s;font-family:inherit;border:1px solid transparent;text-decoration:none;max-width:100%}
[class^=btn-][style^=--icn]{display:inline-flex;align-items:center}
[class^=btn-][style^=--icn]:before{padding:.5rem}
[class^=btn-]>input{margin:0!important;line-height:1!important;}
p:has(>[class^="btn-"]+[class^="btn-"]) {display:flex;gap:1rem 2rem;flex-wrap: wrap;}
[class^=btn-]:has(>img){display: flex;column-gap: 1.4rem;align-items: center;}
[class^=btn-]>img{flex:0 0 auto;scale:1.8;width:1rem;height:1rem}
[class^=btn-]>:is(input,button):is([type=submit],[type=button]){line-height:1;font-size:inherit;text-transform:inherit;font-weight:inherit;padding:0;letter-spacing:inherit;font-family:inherit;border:none!important;outline:0!important;pointer-events:none;color:currentcolor!important;background:0 0!important;display: block !important}
.arrow {
    z-index: 2;
    padding: min(1.4375rem, 4.5vw);
    font-size: 0;
    border-radius: 3rem;
    border: .065rem solid var(--cLTealStrong);
    flex: 0 0 auto;
    color: var(--cLWhite);
    transition: .2s;
    display: inline-block;
    background-color: var(--cLTealStrong);
    &::before, &::after {
        content: "";
        inset: 30%;
        display: block;
        transition: inherit;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url(../images/arrow.svg);
        mask-image: url(../images/arrow.svg)
    }
    &::after {
        opacity: 0;
        translate: -100% 0;
    }
    &.prev {transform: rotate(-180deg)}
    &:hover {
        color: var(--cLWhite);
        background-color: var(--cLForestGreenDark);
        border-color: var(--cLForestGreenDark);
    }
    &.swiper-button-lock {
        opacity: 0;
        visibility: hidden;
    }
}
.arrow::after,
.arrow::before,
.cliping {
    position: absolute;
    pointer-events: none
}
.arrow,
[class^=btn-] {
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: 0
}
.arrow,
.cliping+*,
[class^=btn-] {position: relative}
.next[class^=btn-]{display:inline-flex;column-gap:1rem;align-items:center;justify-content:space-between}
.next[class^=btn-]:not(.square)>.arrow{scale:1.8;padding:min(.4rem,3vw);transform-origin:left center}
.next.square[class^=btn-]>.arrow {scale: 2.5;border-radius: 0.1rem;padding: min(.4rem,3vw);transform-origin: -14% center}
.next[class^=btn-]>.arrow::after, .next[class^=btn-]>.arrow::before {inset: 20%;}
.next[class^=btn-]:hover>.arrow::before,
.arrow:hover::before{translate:100% 0;opacity:0}
.next[class^=btn-]:hover>.arrow::after,
.arrow:hover::after{translate:0 0;opacity:1}
.overlay{position:absolute;inset:0;z-index:3;font-size:0;}
/* other */
.sup-leaf:after {
    position: relative;
    content: '';
    display: inline-block;
    vertical-align: super;
    padding: min(1rem,2.5vw);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/leaf-sup.svg);
}
[class^=btn-rond] {
    border-radius: 2rem;
    column-gap: min(1rem,4vw);
    padding: min(15px,3vw) min(25px,7vw);
}
.karma {
    line-height: .8;
    font-weight: 400;
    font-family: 'Good Karma';
}
.karma:not([class*="ttl-"]) {font-size: var(--fs94);}
/* Mask */
.clip {
    position: relative;
    z-index: 1;
    font-weight: 400;
    font-style: italic;
    display: inline-block;
    transition: initial;
}
.clip::before {
    position: absolute;
    content: '';
    z-index: -1;
    pointer-events: none;
    inset: -47% -22% -10% -13%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../images/underline.svg);
    mask-image: url(../images/underline.svg);
}
.clip.clip-cLSoftYellow {color: var(--cLForestGreenDark);}
.clip.clip-cLSoftYellow::before {background-color: var(--cLSoftYellow);}
/* mask-circle */
ul:has( .mask-circle) {
    position: relative;
    display: grid;
    padding-left: 0;
    gap: min(26px,5vw) 5%;
    grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
    & > li {
        position: relative;
        z-index: 1;
        display: flex;
        line-height: 1.3;
        align-items: center;
        font-size: min(17px,4vw);
        column-gap: min(20px,4vw);
        padding-right: min(2rem,5vw);
        &::after {
            position: absolute;
            inset: -5% 0;
            z-index: -1;
            content: '';
            pointer-events: none;
            background-color: var(--cLWhite);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-position: center right;
            mask-position: center right;
            -webkit-mask-image: url(../images/bg-mask.svg);
            mask-image: url(../images/bg-mask.svg);
        }
    }
}
.mask-circle {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 1/1;
    height: max-content;
    display: inline-block;
    width: min(132.098px,30%);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
    & > img {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: inherit;
        object-fit: cover;
    }
}
/* mask-icn */
ul:has( .mask-icn) {
    display: flex;
    padding-left: 0;
    flex-wrap: wrap;
    list-style: none;
    font-weight: 700;
    gap: min(1rem) 2%;
    text-align: center;
    font-size: var(--fs18);
    flex-direction: initial;
    color: var(--cLForestGreenDark);
}
ul:has( .mask-icn) > li {
    position: relative;
    display: flex;
    line-height: 1.3;
    text-align: center;
    align-items: center;
    font-size: min(18px,4vw);
    flex-direction: column;
    row-gap: min(0.6rem,3vw);
    flex: 1 1 max(120px,min(35vw,22%));
}
ul:has( .mask-icn) .karma {
    line-height: 0.7;
    font-size: var(--fs34);
    color: inherit !important;
}
.mask-icn {
    position: relative;
    width: 0;
    height: 0;
    display: inline-block;
    padding: min(2.5rem,7vw);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(../images/circle.svg);
    mask-image: url(../images/circle.svg);
}
.mask-icn img {
    position: absolute;
    inset: 0;
    margin: 0;
    scale: .45;
    width: 100%;
    height: 100%;
    filter: invert(1);
    max-width: initial;
    object-fit: contain;
    mix-blend-mode: color-dodge;
}
/* .clip::before {
    position: relative;
    content: '';
    display: inline;
    line-height: inherit;
    background-color: red;
} */
.link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--cLDarkGreen);
    column-gap: min(1rem,3vw);
}
.link.prev::before {rotate: -180deg;}
.link.next::after,.link.prev::before {
    position: relative;
    content: '';
    padding: min(.5rem,1.7vw);
    display: inline-block;
    background-color: currentcolor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../images/arrow.svg);
    mask-image: url(../images/arrow.svg)
}
.cLSteelBlueDark {color: var(--cLSteelBlueDark) !important;}
.cLYellowOlive {color: var(--cLYellowOlive) !important;}
.cLTealStrong {color: var(--cLTealStrong) !important;}
.cLCocoaCream {color: var(--cLCocoaCream) !important;}
.cLOrangeSoft {color: var(--cLOrangeSoft) !important;}
.cLPeachSoft {color: var(--cLPeachSoft) !important;}
.cLLimeYellow {color: var(--cLLimeYellow) !important;}
.cLMintBackground {color: var(--cLMintBackground) !important;}
.cLForestGreenDark {color: var(--cLForestGreenDark) !important;}

.btn-cLRoseBeige {border: .065rem solid var(--cLRoseBeige);color: var(--cLCharcoal);background-color: var(--cLRoseBeige);}
.btn-cLRoseBeige:hover {border: .065rem solid var(--cLPeachSoft);color: var(--cLCharcoal);background-color: var(--cLPeachSoft);}

.btn-cLTealStrong {border: .065rem solid var(--cLTealStrong);color: var(--cLOffWhitePeach);background-color: var(--cLTealStrong);}
.btn-cLTealStrong:hover {border: .065rem solid var(--cLPeachSoft);color: var(--cLCharcoal);background-color: var(--cLPeachSoft);}

.btn-cLForestGreenDark {border: .065rem solid var(--cLForestGreenDark);color: var(--cLOffWhitePeach);background-color: var(--cLForestGreenDark);}
.btn-cLForestGreenDark:hover {border: .065rem solid var(--cLPeachSoft);color: var(--cLCharcoal);background-color: var(--cLPeachSoft);}

.btn-cLYellowOlive {border: .065rem solid var(--cLYellowOlive);color: var(--cLCharcoal);background-color: var(--cLYellowOlive);}
.btn-cLYellowOlive:hover {border: .065rem solid var(--cLTealStrong);color: var(--cLOffWhitePeach);background-color: var(--cLTealStrong);}

.btn-cLPeachSoft {border: .065rem solid var(--cLPeachSoft);color: var(--cLCharcoal);background-color: var(--cLPeachSoft);}
.btn-cLPeachSoft:hover {border: .065rem solid var(--cLTealStrong);color: var(--cLOffWhitePeach);background-color: var(--cLTealStrong);}

.btn-cLOffWhitePeach {border: .065rem solid var(--cLOffWhitePeach);color: var(--cLCharcoal);background-color: var(--cLOffWhitePeach);}
.btn-cLOffWhitePeach:hover {border: .065rem solid var(--cLForestGreenDark);color: var(--cLOffWhitePeach);background-color: var(--cLForestGreenDark);}

.btn-rond-cLYellowOlive {border: .065rem solid var(--cLYellowOlive);color: var(--cLForestGreenDark);background-color: var(--cLYellowOlive);}
.btn-rond-cLYellowOlive:hover {border: .065rem solid var(--cLForestGreenDark);color: var(--cLOffWhitePeach);background-color: var(--cLForestGreenDark);}
@media screen and (min-width:1200px) {
    .overlay > .arrow {
        top: initial;
        rotate: 0deg;
        bottom: min(3rem,5vw);
    }
}