body {
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary-dark: #1A202C;
    --primary-dark-alt: #2D3748;
    --primary-light: #F7FAFC;
    --accent-gold: #FFD700;
    --accent-orange: #FF8C00;
    --text-color-dark: #2D3748;
    --text-color-light: #EDF2F7;
    --warning-red: #E53E3E;
}

.bg-primary-dark {
    background-color: var(--primary-dark);
}

.bg-primary-dark-alt {
    background-color: var(--primary-dark-alt);
}

.text-color-light {
    color: var(--text-color-light);
}

.text-color-dark {
    color: var(--text-color-dark);
}

.accent-gold {
    color: var(--accent-gold);
}

.accent-orange {
    color: var(--accent-orange);
}

.bg-accent-gold {
    background-color: #968008;
}

.bg-warning-red {
    background-color: var(--warning-red);
}

.bg-warning-red-two{
    background-color: darkred;
}



.link {
    text-decoration: none;
}

.grow-large {
    transition: transform 0.3s ease-in-out;
}

.grow-large:hover {
    transform: scale(1.05);
}

/* Age Verification Modal */
#age-verification-modal {
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
}

#age-verification-modal > div {
    max-width: 40rem;
}

/* Cookie Banner */
#cookie-banner {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

/* Footer Logos */
.footer-logos img {
    max-width: 150px; /* Max width for consistency */
    height: auto; /* Maintain aspect ratio */
    margin: 0.5rem 1rem; /* Spacing between logos */
    vertical-align: middle; /* Align images vertically */
}

/* Ensure buttons don't have underlines */
button, .button, .link.bg-accent-gold {
    text-decoration: none !important;
}

/* Responsive image sizing for footer logos */
@media screen and (max-width: 60em) {
    .footer-logos img {
        max-width: 120px;
    }
}

@media screen and (max-width: 30em) {
    .footer-logos img {
        max-width: 100px;
    }
}
/*
 * Base styles for the .lawMatrixNode container and its child elements.
 * These styles provide a clean, readable foundation for text content.
 */

/* Container styles for .lawMatrixNode */
.lawMatrixNode {
    padding-top: 40px; /* Top padding for the content area */
    padding-left: 30px; /* Left padding for the content area */
    padding-right: 30px; /* Right padding for the content area */
    /* Optional: You might want to add a max-width and center it for better readability on large screens */
    /* max-width: 960px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

footer .w-auto{
    object-fit: contain;
}

header{
    gap: 20px;
    flex-wrap: wrap;
}

.f2{
    font-size: 2rem !important;
}

@media screen and (max-width: 1050px) {
    header{
        justify-content: center !important;
    }
}

@media screen and (max-width: 565px) {
    .f2{
        font-size: 1.5rem !important;
    }
}