.btn {
    -webkit-appearance: none;
    outline: none;
    padding: 18px 30px 16px 30px;
    display: inline-block;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    background: #fff;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
}

@media(max-width: 997px){
    .btn{
        max-width: 250px;
        white-space: normal;
        word-wrap: break-word;
    }
}

.btn--link {
    background:none;
}

.btn--primary {
    color: #fff;
    background: var(--primary-color);
    transition: background 100ms linear;
}

.btn--primary:hover {
    background: var(--primary-color-hover);
}

    .btn--primary.btn--outline {
        background: #fff;
        color: var(--primary-color);
        /* outline doesn't work properly in Safari when targeted element already has a border-radius
        outline: 2px solid var(--primary-color);
        outline-offset:-2px; This breaks the look on safari*/
        top: -2px;
        bottom: -2px;
        left: -2px;
        right: -2px;
        border: 2px solid var(--primary-color);
        border-radius: 100px;
    }

        .btn--primary.btn--outline:hover {
            color: #fff;
            background: var(--primary-color);
            /*outline:none;*/
            
            border-color: transparent;
            /*
            margin: 2px 2px 2px 2px;
            */
        }

.btn--secondary {
    color: var(--primary-color);
    background: #fff;
    transition: background 100ms linear;
}

.btn--secondary:hover {
    background: linear-gradient(0deg, rgba(203, 0, 132, 0.2), rgba(203, 0, 132, 0.2)), #FFFFFF;
}

    .btn--secondary.btn--outline {
        background: transparent;
        color: #ffffff;
        /*  outline doesn't work properly in Safari when targeted element already has a border-radius
        outline: 2px solid #ffffff;
        outline-offset: -2px;*/
        top: -2px;
        bottom: -2px;
        left: -2px;
        right: -2px;
        border: 2px solid #ffffff;
        border-radius: 100px;
    }

        .btn--secondary.btn--outline:hover {
            color: var(--primary-color);
            background: #fff;
            /*outline: none;*/
            border-color: transparent;
            /*
            margin: 2px 2px 2px 2px;
            */
        }

.btn--cta:after {
    background: url(../images/arrow.svg) no-repeat;
    background-size: contain;
    content: '';
    width: 17.5px;
    height: 10px;
    margin-left: 8px;
    display: inline-block;
    transform: translateX(0px);
    transition: transform 0.3s;
}

.btn--cta:hover:after {
    transform: translateX(4px);
}

.btn--block {
    display:block;
    width:100%;
}

.btn--naked {
    display:inline-flex;
    border:0px;
    padding:0px;
    background-color:transparent;
    font-weight:400;
    gap:8px;
    flex-direction:row;
    align-items:center;
}

.btn--small {
    padding: 10px 30px 8px 30px;
}

.nav-item-link {
    font-size: 17px;
    font-weight: 600;
    height: 50px;
}


/* New  */


.button-ghost, .button-secondary, .button-primary {
    --btn-background-color: transparent;
    --btn-hover-background-color: transparent;
    --btn-icon-background-color: transparent;
    --btn-icon-color: inherit;
    --btn-icon-size: 2.5rem;
    font-family: "Adelle Sans";
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-left: 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    height: 52px;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
    border: unset;
    background: var(--btn-background-color);
    transition: color .4s ease,border-color .4s ease;
    overflow: hidden;
    width: fit-content
}

    .button-ghost::before, .button-secondary::before, .button-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--btn-hover-background-color);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .4s ease;
        z-index: -1
    }

    .button-ghost:hover::before, .button-secondary:hover::before, .button-primary:hover::before {
        transform: scaleX(1)
    }

    .button-ghost:focus-visible, .button-secondary:focus-visible, .button-primary:focus-visible {
        outline: 2px solid var(--color-indigo-base);
        outline-offset: 3px
    }

    .button-ghost:focus, .button-secondary:focus, .button-primary:focus {
        outline: 5px solid var(--color-outline);
        outline-offset: 0px
    }

    .button-ghost:disabled, .button-secondary:disabled, .button-primary:disabled, [aria-disabled=true].button-ghost, [aria-disabled=true].button-secondary, [aria-disabled=true].button-primary {
        opacity: .4;
        pointer-events: none;
        cursor: not-allowed
    }

    .button-ghost i, .button-secondary i, .button-primary i, .button-ghost .svg-icon, .button-secondary .svg-icon, .button-primary .svg-icon, .button-ghost .svg-wrapper, .button-secondary .svg-wrapper, .button-primary .svg-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background-color: var(--btn-icon-background-color);
        aspect-ratio: 1/1;
        flex-shrink: 0;
        transition: background-color .4s ease
    }

.button-primary {
    --btn-background-color: var(--color-indigo-base);
    --btn-hover-background-color: var(--color-indigo-800);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-indigo-base)
}

    .button-primary:hover {
        border-color: var(--color-indigo-800)
    }

.button-primary--pink {
    --btn-background-color: var(--color-pink-base);
    --btn-hover-background-color: var(--color-pink-800);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-pink-base)
}

    .button-primary--pink:hover {
        border-color: var(--color-pink-800)
    }

.button-primary--purple {
    --btn-background-color: var(--color-purple-base);
    --btn-hover-background-color: var(--color-purple-hover);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-purple-base)
}

    .button-primary--purple:hover {
        border-color: var(--color-purple-hover)
    }

.button-primary--white {
    --btn-background-color: var(--color-white);
    --btn-hover-background-color: var(--color-grey-50);
    --btn-icon-background-color: var(--color-indigo-100);
    color: var(--color-grey-900);
    border-color: var(--color-white)
}

    .button-primary--white:hover {
        border-color: var(--color-grey-50)
    }

.button-secondary {
    --btn-background-color: var(--color-indigo-base);
    --btn-hover-background-color: var(--color-indigo-base);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-indigo-base);
    border-color: var(--color-indigo-base)
}

    .button-secondary:hover {
        border-color: var(--color-indigo-base)
    }

.button-secondary {
    padding: 0 2rem
}

    .button-secondary:hover {
        color: var(--color-white)
    }

.button-secondary--pink {
    --btn-background-color: var(--color-pink-base);
    --btn-hover-background-color: var(--color-pink-800);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-pink-base)
}

    .button-secondary--pink:hover {
        border-color: var(--color-pink-800)
    }

    .button-secondary--pink:hover {
        color: var(--color-white)
    }

.button-secondary--white {
    --btn-background-color: transparent;
    --btn-hover-background-color: rgba(255, 255, 255, 0.25);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-white)
}

    .button-secondary--white:hover {
        border-color: hsla(0,0%,100%,.25)
    }

    .button-secondary--white:hover {
        color: var(--color-white)
    }

.button-secondary--dark {
    --btn-background-color: var(--color-grey-900);
    --btn-hover-background-color: var(--color-grey-900);
    --btn-icon-background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-grey-900);
    border-color: var(--color-grey-900)
}

    .button-secondary--dark:hover {
        border-color: var(--color-grey-900)
    }

    .button-secondary--dark:hover {
        color: var(--color-white)
    }

.button-ghost {
    --btn-background-color: transparent;
    --btn-hover-background-color: transparent;
    color: var(--color-indigo-base);
    border-color: rgba(0,0,0,0);
    padding: .5rem .25rem;
    background: rgba(0,0,0,0)
}

    .button-ghost:hover {
        color: var(--color-indigo-800);
        text-decoration: underline
    }

.button-ghost--pink {
    color: var(--color-pink-base)
}

    .button-ghost--pink:hover {
        color: var(--color-pink-800)
    }

.button-ghost--white {
    color: var(--color-white)
}

    .button-ghost--white:hover {
        color: var(--color-grey-100)
    }

.button-primary--sm, .button-secondary--sm, .button-ghost--sm {
    font-size: .875rem;
    padding: .375rem 1.125rem
}

.button-primary--lg, .button-secondary--lg, .button-ghost--lg {
    font-size: 1.125rem;
    padding: .625rem 2rem
}

.button-primary--full, .button-secondary--full, .button-ghost--full {
    width: 100%
}

.button-icon--secondary, .button-icon--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    border: none;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-decoration: none;
    transition: color .4s ease,border-color .4s ease
}

    .button-icon--secondary svg, .button-icon--primary svg, .button-icon--secondary img, .button-icon--primary img, .button-icon--secondary i, .button-icon--primary i {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        position: relative;
        z-index: 1
    }

    .button-icon--secondary::before, .button-icon--primary::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--icon-btn-hover-overlay);
        transform: scale(0);
        transition: transform .4s ease;
        z-index: 0
    }

    .button-icon--secondary:hover::before, .button-icon--primary:hover::before {
        transform: scale(1)
    }

    .button-icon--secondary:focus-visible, .button-icon--primary:focus-visible {
        outline: 2px solid var(--color-indigo-base);
        outline-offset: 3px
    }

    .button-icon--secondary:disabled, .button-icon--primary:disabled, [aria-disabled=true].button-icon--secondary, [aria-disabled=true].button-icon--primary {
        pointer-events: none;
        cursor: not-allowed
    }

.button-icon--primary {
    --icon-btn-hover-overlay: var(--color-pink-800);
    background: var(--color-pink-base);
    color: var(--color-white)
}

    .button-icon--primary:disabled, .button-icon--primary[aria-disabled=true] {
        background: var(--color-grey-100);
        color: var(--color-grey-200)
    }

.button-icon--secondary {
    --icon-btn-hover-overlay: color-mix(in srgb, var(--color-pink-base) 12%, transparent);
    background: var(--color-white);
    border: 1px solid var(--color-grey-100);
    color: var(--color-grey-900);
    transition: color .4s ease,border-color .4s ease
}

    .button-icon--secondary:hover {
        border-color: var(--color-pink-base);
        color: var(--color-pink-base)
    }

    .button-icon--secondary:disabled, .button-icon--secondary[aria-disabled=true] {
        border-color: var(--color-grey-100);
        color: var(--color-grey-200)
    }

.button-icon--ghost {
    display: flex;
    align-items: center;
    gap: 8px;
    --icon-btn-hover-overlay: transparent;
    background: rgba(0,0,0,0);
    border: none;
    color: var(--color-grey-900);
    min-height: 38px
}

    .button-icon--ghost:hover {
        color: var(--color-pink-base)
    }

    .button-icon--ghost:disabled, .button-icon--ghost[aria-disabled=true] {
        color: var(--color-grey-200)
    }

.button-link {
    --link-btn-color: var(--color-pink-base);
    --link-btn-hover-color: var(--color-pink-800);
    --link-btn-hover-bg: var(--color-pink-100);
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 8px 0;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0);
    color: var(--link-btn-color);
    font-family: "Adelle Sans",sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease,color .2s ease,padding .2s ease
}

    .button-link svg, .button-link i, .button-link .svg-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        transition: color .2s ease
    }

    .button-link:hover {
        background: var(--link-btn-hover-bg);
        color: var(--link-btn-hover-color);
        padding: 8px
    }

    .button-link:active {
        background: var(--link-btn-hover-bg);
        color: var(--link-btn-color)
    }

    .button-link:focus-visible {
        outline: 4px solid var(--color-outline);
        outline-offset: 0
    }

    .button-link:disabled, .button-link[aria-disabled=true] {
        opacity: .24;
        pointer-events: none;
        cursor: not-allowed
    }

.button-link--purple {
    --link-btn-color: var(--color-purple-base);
    --link-btn-hover-color: var(--color-purple-800);
    --link-btn-hover-bg: var(--color-purple-100)
}

.button-link--indigo {
    --link-btn-color: var(--color-indigo-base);
    --link-btn-hover-color: var(--color-indigo-800);
    --link-btn-hover-bg: var(--color-indigo-100)
}

.button-link--white {
    --link-btn-color: var(--color-grey-900);
    --link-btn-hover-color: var(--color-grey-900);
    --link-btn-hover-bg: var(--color-grey-50)
}

    .button-link--white:active {
        color: var(--color-grey-600)
    }

    .svg-wrapper {
display:flex;
    }


/* ---- Navbar button text collapse at 1280px ---- */
#button-ecommerce .button-text,
#button-lets-talk .button-text {
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

@media (min-width: 1440px) {
    #button-ecommerce .button-text,
    #button-lets-talk .button-text {
        width: auto;
    }
}