.btn {
    height: 64px;
    padding: 18px 32px;
    background-color: var(--color-primary);
    border-radius: var(--radius-lg);
    border:none;
    font-size: var(--font-size-md);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    cursor:pointer;
    box-sizing: border-box; 
}

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

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

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

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

.btn-light{
    color:var(--color-dark);
    background-color: var(--color-light);
}

.btn-light svg{
    fill:var(--color-dark);
}

.btn-outline-primary{
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    fill: var(--color-primary);
}
.btn-outline-primary:hover{
    background-color: var(--color-light);
}
.btn-outline-primary svg{
    fill: var(--color-primary);
}
.btn-outline-primary:hover{
    background-color: var(--color-primary);
    fill: var(--color-white);
    color:var(--color-white);
}
.btn-outline-primary:hover svg{
    color:var(--color-white);
    fill: var(--color-white);
}

.btn-outline-secondary{
    background-color: var(--color-white);
    border: 1px solid var(--color-secondary-opacity);
    fill: var(--color-secondary);
    color:var(--color-dark);
}
.btn-outline-secondary svg{
    fill: var(--color-secondary);
}

.btn-outline-secondary:hover{
    background-color: var(--color-secondary);
    fill: var(--color-white);
    color:var(--color-white);
}
.btn-outline-secondary:hover svg{
    color:var(--color-white);
    fill: var(--color-white);
}
.nav-button{
    height: 44px;
    padding: 12px 16px;
    font-size: var(--font-size-sm);

}

.icon-button{
    gap: 10px;
}

.link{
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
}
.link:hover{
    color: var(--color-dark)
}

@media (max-width: 600px) {
    .btn{
        height: 48px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        padding: 12px 0;
    }
}