.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;
}