:root {
    --brand-bg: #19252c; /* Blackish Green - Main background for the website */
    --brand-bg-rgba: rgba(33, 46, 53, 1); /* RGBA value Main background for the website */
    --brand-bg-trans50: rgba(33, 46, 53, 0.5);
    --brand-bg-trans25: rgba(33, 46, 53, 0.25); 

    --brand-color-1st: #fadc04; /* Yellow Primary Brand color for the website */
    --brand-color-1st-rgba: rgba(250, 220, 4, 1);
    --brand-color-1st-trans75: rgba(250, 220, 4, 0.75);
    --brand-color-1st-trans50: rgba(250, 220, 4, 0.5);

    --brand-color-2nd: #ff3131; /* Red Primary Brand color for the website */
    --brand-color-2nd-rgba: rgba(255, 49, 49, 1);
    --brand-color-2nd-trans50: rgba(255, 49, 49, 0.5);

    --brand-color-3rd: rgba(255, 193, 7, 1); /* Orange Test Full opacity */
    --brand-color-3rd-trans50: rgba(255, 193, 7, 0.5); /* 50% transparency */
    --brand-color-3rd-trans25: rgba(255, 193, 7, 0.25); /* 25% transparency */
    --brand-color-3rd-trans10: rgba(255, 193, 7, 0.1); /* 10% transparency */


    --brand-color-4th: #6feb19; /* Green Primary Brand color for the website */

    --brand-bg-light: #f9f9f9; /* white color */
    --brand-bg-light-rgba: rgba(249, 249, 249, 1); /* Full opacity */
    --brand-bg-light-trans50: rgba(249, 249, 249, 0.5); /* 50% transparency */
    --brand-bg-light-trans25: rgba(249, 249, 249, 0.25); /* 25% transparency */

    --brand-black: #000000; /* Pure black */
    --brand-black-rgba: rgba(0, 0, 0, 1); /* Full opacity */
    --brand-black-trans90: rgba(0, 0, 0, 0.9); /* 90% opacity */
    --brand-black-trans75: rgba(0, 0, 0, 0.75); /* 75% opacity */
    --brand-black-trans50: rgba(0, 0, 0, 0.5); /* 50% opacity */
    --brand-black-trans25: rgba(0, 0, 0, 0.25); /* 25% opacity */
    --brand-black-trans10: rgba(0, 0, 0, 0.1); /* 10% opacity */
}

/* Add new CSS below this line */

html {
    scroll-behavior: smooth; /* Fallback for browsers supporting native smooth scrolling */
}

/* Example: Custom button styles using your variables */
.button-primary {
    background-color: var(--brand-color-1st);
    color: var(--brand-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    transition: background-color 0.3s ease-in-out;
}

.button-primary:hover {
    background-color: var(--brand-color-1st-trans50);
}