:root {
    --font-primary: "Euclid Circular A", sans-serif;
    --font-secondary: "Space Grotesk", serif;
    --font-tertiary: "felidae", serif;

    /* Color Variables */
    --p1: 0, 0, 0; /* Primary color (black) */
    --p2: 255, 255, 255; /* Secondary color (white) */
    --n1: 255, 255, 255; /* Neutral color (white) */
    --n2: 0, 0, 0; /* Neutral color (black) */
    --n3: 255, 255, 255; /* Neutral color (white) */
    --n4: 0, 0, 0; /* Neutral color (black) */
    --n5: 100, 100, 100; /* Gray color */
    
    /* Hex Colors */
    --p1-hex: #000000; /* Black */
    --p2-hex: #FFFFFF; /* White */
    --n1-hex: #FFFFFF; /* White */
    --n4-hex: #000000; /* Black */
}


a {
    color: rgba(var(--n1), 1); /* White links */
}

a:hover {
    color: rgba(var(--p2), 1); /* Change link color on hover to black */
}

h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--n1), 1); /* White headings */
}

.button {
    background-color: rgba(var(--p2), 1); /* White button */
    color: rgba(var(--p1), 1); /* Black text on button */
}

.button:hover {
    background-color: rgba(var(--p1), 1); /* Black button on hover */
    color: rgba(var(--p2), 1); /* White text on button hover */
}

/* Additional styles for other elements can be added similarly */

.banner-section.index-three::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n4), 1);
    background: linear-gradient(180deg, rgb(0 0 0 / 40%) 0%, rgba(215, 0, 7, 0) 90%)}
    @font-face {
  font-family: 'Phosphor';
  src: url('../webfonts/phosphor.woff2') format('woff2');
}