@import url("https://use.typekit.net/obu0kph.css");
:root {
    --cLBlack: #000000;
    --cLWhite: #FFFFFF;
    --cLPink: #FB8CA7;
    --cLDarkTeal: #053B46;
    --cLSlateBlue: #67818E;
    --cLLightGray: #F4F5F7;
    --cLLightGray80: #F4F5F7CC;
    --fs110: clamp(min(40px,10vw), 6.6vw, 110px);
    --fs70: clamp(min(60px,7.4vw), 3vw, 70px);
    --fs50: clamp(min(40px,6vw), 2.7vw, 50px);
    --fs30: clamp(min(22px,4.3vw), 2.1vw, 30px);
    --fs24: clamp(min(19px,4.1vw), 1.4vw, 24px);
    --fs22: clamp(min(19px,4vw), 1.2vw, 22px);
    --fs20: clamp(min(19px,4vw), 1.25vw, 20px);
    --fs18: clamp(min(18px,3.7vw), 1vw, 18px);
    --fs16: min(16px,3.6vw);
    --fs14: min(14px,3.4vw);
}
body {
    color: var(--cLDarkTeal);
    font-size: var(--fs18);
    font-family: 'neulis-sans', sans-serif;
    & hr {border-bottom: 2px solid var(--cLPurpleVivid);}
    & :is(h1,h2,h3,h4,h5,h6) {line-height: 1.2;}
    & strong:not([class]) {font-weight: 500 !important;}
    & .fs110 {font-size: var(--fs110);}
    & .fs70 {font-size: var(--fs70);}
    & .fs50 {font-size: var(--fs50);}
    & .fs30 {font-size: var(--fs30);}
    & .fs24 {font-size: var(--fs24);}
    & .fs22 {font-size: var(--fs22);}
    & .fs18 {font-size: var(--fs18);}
    & .fs16 {font-size: var(--fs16);}
    & .fs14 {font-size: var(--fs14);}
    
    & .fw300 {font-weight: 300;}
    & .fw400 {font-weight: 400;}
    & .fw500 {font-weight: 500;}
    & .fw700 {font-weight: 700;}
    & .fw800 {font-weight: 800;}
    & .italic {font-style: italic;}
    & .line-height-1 {line-height: 1;}
    & .uppercase-text {text-transform: uppercase;}
    & .uppercase-initial {text-transform: initial;}
    & p:has( :is(.btn, .tag)) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: min(1em, 4vw);
        &:is(.text-center &) {
            justify-content: center;
        }
    }
    & [style^="--icn-"] {
        display: flex;
        align-items: center;
        column-gap: min(.6em, 3vw);
        &[style^="--icn-before"]::before,
        &[style^="--icn-after"]::after {
            position: relative;
            content: "";
            display: block;
            transition: initial;
            pointer-events: none;
            padding: min(1em, 5vw);
            background-color: currentcolor;
        }
        &[style^="--icn-before"]::before {
            -webkit-mask : var(--icn-before) center / contain no-repeat;
            mask : var(--icn-before) center / contain no-repeat;
        }
        &[style^="--icn-after"]::after {
            -webkit-mask : var(--icn-after) center / contain no-repeat;
            mask : var(--icn-after) center / contain no-repeat;
        }
    }
    & [class^="btn-"] {
        border: none;
        line-height: 1;
        overflow: hidden;
        font-weight: 500;
        text-align: center;
        transition: all .3s;
        border-radius: 10em;
        white-space: nowrap;
        display: inline-flex;
        letter-spacing: -2.5%;
        max-width: max-content;
        font-size: var(--fs18);
        text-transform: initial;
        justify-content: center;
        border: 1px solid transparent;
        padding: min(0.723em,3vw) min(1.3em,5vw);
        &:is([style^="--icn-"])::before,
        &:is([style^="--icn-"])::after {
            scale: 1.5;
            padding: min(.4rem,2vw);
        }
        &:has( .arrow,[style^="--icn-"]) {
            align-items: center;
            column-gap: min(1.5rem,6vw);
        }
        &.corner {
            border-radius: 3px;
            font-weight: 700;
        }
        &.btn-border {
            color: currentColor;
            border-color: currentColor;
            background-color: transparent;
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLPink);
                background-color:  var(--cLPink);
            
            }
        }
        &.btn-border-pink {
            color: currentColor;
            border-color: var(--cLPink);
            background-color:  transparent;
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLPink);
                background-color:  var(--cLPink);
            
            }
        }
        &.btn-cLSlateBlue {
            color: var(--cLWhite);
            border-color: var(--cLSlateBlue);
            background-color:  var(--cLSlateBlue);
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLDarkTeal);
                background-color:  var(--cLDarkTeal);
            
            }
        }
        &.btn-cLDarkTeal {
            color: var(--cLWhite);
            border-color: var(--cLDarkTeal);
            background-color:  var(--cLDarkTeal);
            &:hover {
                color: var(--cLDarkTeal);
                border-color: var(--cLPink);
                background-color:  var(--cLPink);
            
            }
        }
        &.btn-pink {
            color: var(--cLDarkTeal);
            border-color: var(--cLPink);
            background-color:  var(--cLPink);
            &:hover {
                color: var(--cLWhite);
                border-color: var(--cLDarkTeal);
                background-color:  var(--cLDarkTeal);
            
            }
        }
        @media screen and (width >= 1200px) {
            & {
                width: auto;
            }
        }
    }
    & .cLSlateBlue {color: var(--cLSlateBlue);}
    & .cLPink {color: var(--cLPink);}
}