:root {
    --color-primary: #548357;
    --color-primary-dark: #436946;
    --color-secondary: #E8F5E9;
    --color-accent: #ff994f;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #5f7285;
    --color-white: #ffffff;
    --color-border: #e0e0e0;

    --font-primary: 'Fredoka', sans-serif;
    --spacing-unit: 8px;
}

.cta-button  {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 4);
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: max-content;
    text-decoration: none;
    align-self: center;
    justify-self: center;
    margin-bottom: 80px;
}

.cta-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    color: var(--color-white);
}

.cta-button.secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    margin: 15px 0px;
}

.cta-button.secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary-dark);
}