.fixedWidthCenterContent {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}
/* --- Brand Utility Classes --- */
.highlightColor {
    color: #d40606 !important;
}

/* --- Global & Typography --- */
body {
    font-family: 'Helvetica', Arial, sans-serif;
    color: #4b4b4b;
    font-weight: 300;
    line-height: 1.6;
}

b, strong {
    font-weight: 900;
}

/* --- Brand Links --- */
body a, .nav-link a {
    color: #d40606;
    text-decoration: none;
    transition: color 0.2s ease;
}

body a:hover {
    color: #a10f2b; /* Slightly darker for contrast */
    text-decoration: underline;
}

/* --- Layout Elements --- */
#header {
    z-index: 2000 !important;
}

.header-upper {
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    font-weight: 500;
}

.header-upper a.nav-link {
    color: #4b4b4b;
}

.header-upper a.nav-link:hover {
    color: #d40606;
}

#footer {
    border-top: 3px solid #d40606;
}

/* --- Buttons --- */
.btn, .btn-primary {
    color: #fff !important;
    background-color: #d40606;
    border-color: #bd0505;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn:hover, .btn-primary:hover {
    background-color: #a10f2b;
    border-color: #8a0d25;
    transform: translateY(-1px);
}

.btn-link {
    color: #d40606;
}



/* Ensure btn-white stays white/light-gray by default */
.btn.btn-white {
    background-color: #ffffff !important;
    color: #4b4b4b !important;
    border: 1px solid #dee2e6 !important;
    font-weight: 500;
}

/* Icons inside btn-white should use your brand red */
.btn.btn-white i {
    color: #d40606;
    margin-right: 4px;
}

/* Hover state: Flip to brand red with white text/icons */
.btn.btn-white:hover {
    background-color: #d40606 !important;
    color: #ffffff !important;
    border-color: #d40606 !important;
}

.btn.btn-white:hover i {
    color: #ffffff !important;
}

/* Active state for the currently selected view */
.btn.btn-white.active {
    background-color: #f8f9fa;
    border-color: #d40606;
    color: #d40606 !important;
}



/* --- Navigation & Tabs --- */
.nav-tabs .nav-link.active {
    color: #d40606 !important;
    border-bottom: 3px solid #d40606;
}

.page-item.active .page-link {
    background-color: #d40606;
    border-color: #d40606;
    color: #fff !important;
}


/* Use a more specific selector or !important to override Bootstrap defaults */
.breadcrumb {
    background-color: transparent !important; /* Removes Bootstrap's default gray box */
    padding: 0 !important; /* Removes default Bootstrap padding */
    margin: 0;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Bootstrap targets '.breadcrumb-item a' or '.breadcrumb a' specifically */
.breadcrumb-nav a,
.breadcrumb-nav a:visited,
.breadcrumb-nav .breadcrumb-nav-item a {
    color: white !important;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
}

/* Ensure the icon inherits the white color */
.breadcrumb-nav i {
    color: white;
    margin-right: 5px;
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Remove the 1, 2, 3 list markers and align horizontally */
.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none; /* This removes the numbers */
    padding: 0;
    margin: 0;
    text-transform: uppercase; /* This forces all text to uppercase */
    letter-spacing: 1px;       /* Optional: adds a bit of space for readability */
}

/* Add the "/" separator between items */
.breadcrumb-nav-item + .breadcrumb-nav-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: rgba(255, 255, 255, 0.6); /* Semi-transparent white separator */
    content: "/";
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Ensure list items sit on the same line */
.breadcrumb-nav-item {
    display: flex;
    align-items: center;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.breadcrumb-nav-item.active {
    color: rgba(255, 255, 255, 0.8); /* Slightly dimmed for the current page */
}



.page-info .breadcrumb-nav .active {
    color: white;
    font-weight: 900;
}

/* --- Notifications & Notes --- */
.note {
    font-size: 1.05rem;
    background: #f0fafd; /* Original light blue background */
   /* border-left: 5px solid #5bc0de;  Original brand blue accent */
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: #2c3e50;
    border: 2px solid #c2e7f2; /* Light blue border to match warning style */
}

.warning {
    font-size: 1.05rem;
    background: #fff5f5;
   /** border-left: 5px solid #d40606; **/
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 2px solid #ffc9c9
}

.flash-message {
    background-color: #d40606;
    color: white;
    padding: 10px;
    font-weight: bold;
}

/* --- Page Info / Headers --- */
.page-info {
    background-color: #d40606;
    color: white;
    padding: 20px 30px;
    display: flex;
    align-items: center;
}

.page-info h1 {
    color: #fff;
    font-size: 26px;
    margin: 0 15px 0 0;
}

.page-info h2 {
    color: #fceaea;
    font-weight: 100;
    font-size: 22px;
}

h1, h2, h3, h4, h5 {
    color: #2c3e50;
    font-weight: 700;
}

.h2-section-title {
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: 1.5rem;
}

/* --- Tables & Lists --- */
th {
    color: white;
    background-color: #d40606;
    padding: 12px;
}

.video-icon {
    background: #d40606;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

/* --- Blockquotes --- */
/* --- Modernized Blockquote --- */
/* --- Sophisticated Minimalist Blockquote --- */
blockquote {
    position: relative;
    padding: 2rem 2.5rem;
    margin: 2.5rem 0;
    background-color: #ffffff;
    /* Using a thin, soft neutral border instead of a thick red one */
    border: 1px solid #f0f0f0;
    border-left: 3px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Subtle Brand Accent: A small red quote mark */
blockquote::before {
    content: "\201C";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 2.5rem;
    color: #d40606; /* Your brand red, but small and refined */
    font-family: Georgia, serif;
    opacity: 0.2; /* Faded so it's a subtle hint of color */
    line-height: 1;
}

blockquote p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #34495e;
    font-style: italic;
    margin-bottom: 0;
    letter-spacing: 0.2px;
}

/* Citation style */
blockquote footer {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #95a5a6;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

blockquote footer::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: #d40606; /* A tiny horizontal red line for the citation */
    margin-right: 10px;
    vertical-align: middle;
    opacity: 0.5;
}





/* --- Forms --- */
.form-control:focus {
    border-color: #d40606;
    box-shadow: 0 0 0 0.2rem rgba(212, 6, 6, 0.25);
}

/* --- Footer Refinements --- */
.footer-image h4 {
    color: #d40606;
    font-weight: 900;
}

/* --- Section Headers with Icons --- */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.section-header i {
    color: #d40606;
}

/* --- Progress Bars --- */
progress::-webkit-progress-value { background-color: #d40606; }
progress::-moz-progress-bar { background-color: #d40606; }
progress::-ms-fill { background-color: #d40606; }



.i-section-title {
    background: transparent;
    height: 1px; /* The line itself */
    text-align: center;
    margin: 40px auto; /* Increased margin for vertical breathing room */
    border-bottom: 1px solid #f0f0f0;
    width: 50%;
    position: relative; /* Anchor for the icon */
}

.i-section-title i,
.i-section-title i.fa {
    background: #fff; /* Masks the line behind the icon */
    width: 44px;
    height: 44px;
    font-size: 28px;
    border-radius: 50%;
    color: #d8d8d8;
    line-height: 44px;
    display: inline-block;

    /* Centering the icon vertically on the 1px line */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Moves it exactly to the midpoint */

    padding: 0;
}




/* Remove red focus effects from the search form elements */
.search-form.container .form-control.search:focus,
.search-form.container .btn,
.search-form.container .btn:focus,
.search-form.container .btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: 0; /* Resets input border to neutral gray */
    color: inherit; /* Prevents btn-link from changing text color on click */
}

/* Specifically for the search icons inside those buttons */
.search-form.container .btn-link:focus .search-icon,
.search-form.container .btn-link:active .search-icon {
    outline: none !important;
}




/* --- Content Style 3 Icon (Sidebar/Floating Icons) --- */
/* --- Content Style 3 Icon Restoration --- */
.content-style3 {
    position: relative;
    overflow: visible !important; /* CRITICAL: Allows the icon to hang off the edge */
    background-color: #fff;
    padding: 20px 30px;
    width: calc(100% - 28px);
}

.content-style3-icon {
    position: absolute;
    right: -30px; /* Adjust based on your layout width */
    top: 30px;
    background-color: #fff;
    color: #d40606; /* Brand Red */
    width: 60px;
    height: 60px;
    font-size: 28px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

    /* Flex centering ensures the icon shows up in the middle of the circle */
    display: flex !important;
    align-items: center;
    justify-content: center;

    transition: all 0.3s ease;
    z-index: 100;
}

.content-style3-icon:hover {
    background-color: #d40606;
    color: #fff !important;
    transform: scale(1.1);
}

/* Ensure Font Awesome displays properly inside the div */
.content-style3-icon.fa::before {
    display: block !important;
}

/* Truncate long badges to fit their container */
.badge.bg-light {
    display: inline-block;
    max-width: 100%;       /* Ensures it never exceeds the parent width */
    white-space: nowrap;   /* Keeps the text on a single line */
    overflow: hidden;      /* Hides the text that overflows */
    text-overflow: ellipsis; /* Adds the "..." at the end */
    vertical-align: bottom; /* Keeps alignment clean with adjacent text */
}