p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    font-weight: 500;
}



.bg-gradient-mustard-wine {
    background-color: #E1AD01 !important;
    background-image: linear-gradient(60deg, #800020 0%, #E1AD01 100%) !important;
}

.page-header-ui {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Footer Gradient - Stronger Burgundy */
.bg-gradient-burgundy-mustard {
    background-color: #800020 !important;
    background-image: linear-gradient(135deg, #800020 0%, #800020 40%, #E1AD01 100%) !important;
}

/* Ensure footer text is readable on dark gradient */
.bg-gradient-burgundy-mustard {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-gradient-burgundy-mustard .footer-brand {
    color: #fff !important;
}

.bg-gradient-burgundy-mustard .text-uppercase-expanded {
    color: rgba(255, 255, 255, 0.6) !important;
}

.bg-gradient-burgundy-mustard a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-gradient-burgundy-mustard a:hover {
    color: #fff !important;
    text-decoration: underline;
}

.bg-gradient-burgundy-mustard .icon-list-social-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bg-gradient-burgundy-mustard hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Card Header - Global Default (Flipped Page Header Gradient) */
.card-header {
    background-color: #E1AD01 !important;
    background-image: linear-gradient(225deg, #E1AD01 0%, #800020 100%) !important;
    color: #fff !important;
}

/* Global Button Override - Burgundy Wine */
.btn-primary {
    background-color: #800020 !important;
    border-color: #800020 !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Custom Overlay - Burgundy */
.overlay-burgundy:before {
    background-color: #800020 !important;
}

/* Index Hero Background Image */
.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scaleX(-1);
    /* Mask: Image visible on visual right (code left), transparent on visual left (code right) 
       Adjusted to give text more space by reaching transparent sooner in code-space */
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 50%);
    mask-image: linear-gradient(to right, black 0%, transparent 50%);
}

.page-header-ui-content {
    position: relative;
    z-index: 1;
}

/* Hero Text Override - Index Page */
.hero-text-black {
    color: #000 !important;
    font-weight: 500; /* Adding a bit of weight for readability */
}

.btn-primary:hover {
    background-color: #5d0017 !important;
    border-color: #5d0017 !important;
    color: #fff !important;
}

/* Global Link Color - Burgundy */
a, a:visited, a:hover, a:active {
    color: #800020 !important;
}

/* Exception for links on the dark footer gradient to ensure readability */
.bg-gradient-burgundy-mustard a,
.bg-gradient-burgundy-mustard a:visited,
.bg-gradient-burgundy-mustard a:hover,
.bg-gradient-burgundy-mustard a:active {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Exception for buttons so they don't turn burgundy text */
.btn-primary, .btn-primary:visited, .btn-primary:hover, .btn-primary:active {
    color: #fff !important;
}

/* Custom Background for About Page Values Card */
.bg-vcon {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Elevate content above the background image */
.bg-vcon > * {
    position: relative;
    z-index: 2;
}

/* The Background Image Element */
.bg-vcon::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30% ;
    width: 130%;
    height: 100%;
    /* Assuming path is relative to the CSS file */
    background-image: url('../img/vcon.jpg');
    background-size: cover;
    background-position: 20% center;
    z-index: 1; /* Between card background and content */
    
    /* Opacity Gradient Mask: 20% visible (right) -> 100% visible (left) */
    -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgb(255, 255, 255, 10));
    mask-image: linear-gradient(to left, rgba(0,0,0,0.2), rgb(255, 255, 255, 1));
}

/* Ensure cards inside the custom background are explicitly white */
.bg-vcon .card {
    background-color: #fff !important;
}