/* ============================================================================
   Global Styles & Reset
   ============================================================================ */

/* Global font settings */
* {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.02em;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Scroll padding to account for sticky header when using anchor links */
html {
    scroll-padding-top: 130px; /* Height of header-section + site-header */
}

/* For pages with hero banner, adjust scroll padding dynamically */
.has-hero-banner {
    scroll-padding-top: 130px;
}

/* Add scroll-margin-top to all elements that might be anchor targets */
:target,
[id] {
    scroll-margin-top: 130px;
}

/* Prevent horizontal scroll only on body using clip (does NOT create a scroll container,
   so position: sticky continues to work relative to the viewport scroll) */
body {
    overflow-x: clip;
}
/* html and body intentionally have no overflow-y — the viewport (html) scrolls naturally.
   Any overflow-y: auto/scroll/hidden on body would make body the scroll container
   instead of the viewport, which breaks position: sticky on nested elements. */

/* ============================================================================
   Breadcrumb Styles
   ============================================================================ */

.breadcrumb-container {
    padding: 15px 0;
    border: 1px solid #dadde6;
}

.breadcrumb-container .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.breadcrumb-nav {
    flex: 1;
    min-width: 0;
}

.breadcrumb-container .breadcrumb {
    --bs-breadcrumb-divider: '';
    --bs-breadcrumb-item-active-color: #7D55C7;
    --bs-breadcrumb-divider-color: #1e3268;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

    .breadcrumb-container .breadcrumb::-webkit-scrollbar {
        display: none;
    }

.breadcrumb-container .breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
}

    .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before,
    .breadcrumb-container .breadcrumb-item::before {
        flex-shrink: 0;
    }

    .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: 0 12px;
        padding: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%231E3268' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        vertical-align: middle;
    }

    .breadcrumb-container .breadcrumb-item a {
        color: #1e3268 !important;
        text-decoration: none;
        font-weight: 600;
    }

        .breadcrumb-container .breadcrumb-item a:hover {
            color: #1e3268 !important;
            text-decoration: underline;
        }

    .breadcrumb-container .breadcrumb-item.active {
        color: #1e3268 !important;
        font-weight: 600;
    }

        .breadcrumb-container .breadcrumb-item.active + .breadcrumb-item::before {
            color: #1e3268 !important;
        }

    /* Specific override for the separator before active item */
    .breadcrumb-container .breadcrumb-item:has(+ .breadcrumb-item.active)::after,
    .breadcrumb-container .breadcrumb-item:last-child::before {
        color: #1e3268 !important;
    }

/* Breadcrumb text truncation */
.breadcrumb-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: capitalize;
}

/* Breadcrumb link wrapper */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

/* Current page shows full text on desktop; truncates only when out of space */
.breadcrumb-item-current .breadcrumb-text {
    max-width: 100%;
}

/* Breadcrumb Actions (Share & Print buttons) */
.breadcrumb-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.breadcrumb-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #1e3268 !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
}

    .breadcrumb-action-btn:hover,
    .breadcrumb-action-btn:focus,
    .breadcrumb-action-btn:active,
    .breadcrumb-action-btn:visited {
        color: #1e3268 !important;
        text-decoration: none;
        background: transparent;
    }

    .breadcrumb-action-btn svg {
        color: #1e3268 !important;
    }

    .breadcrumb-action-btn svg [fill="currentColor"] {
        fill: #1e3268 !important;
    }

.breadcrumb-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    margin-left: -2px;
}

.breadcrumb-separator {
    color: #d0d0d0;
    font-size: 20px;
    margin: 0 4px;
}

.breadcrumb-action-btn {
    text-decoration: none !important;
    font-weight: 600 !important;
}

    .breadcrumb-action-btn:hover {
        text-decoration: underline !important;
    }

/* Share Dropdown Customization */
.share-dropdown .dropdown-menu {
    min-width: 200px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px 0;
}

.share-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #1e3268 !important;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .share-dropdown .dropdown-item:hover,
    .share-dropdown .dropdown-item:focus,
    .share-dropdown .dropdown-item:active {
        background-color: #f5f5f5;
        color: #1e3268 !important;
    }

    .share-dropdown .dropdown-item svg {
        color: #1e3268 !important;
        fill: #1e3268 !important;
    }

.shareaholic-share-item {
    position: relative;
}

.share-dropdown .dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Copy Link toast notification */
.copy-link-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #1e3268;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1080;
    pointer-events: none;
}

    .copy-link-toast.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .breadcrumb-container {
        padding: 15px 30px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 16px;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 8px;
        }

    .breadcrumb-action-btn {
        font-size: 15px;
        padding: 6px 10px;
    }

    .breadcrumb-icon {
        width: 22px;
        height: 22px;
    }

    .breadcrumb-container .breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb-container .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-container .breadcrumb-item {
        flex-shrink: 0;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .breadcrumb-container {
        padding: 10px 16px;
        gap: 8px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 14px;
            flex: 1;
            min-width: 0;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 4px;
            width: 14px;
            height: 14px;
            background-size: 14px 14px;
        }

    .breadcrumb-action-btn {
        font-size: 13px;
        padding: 6px 8px;
        gap: 4px;
        padding-right: 0 !important;
    }

        .breadcrumb-action-btn span {
            font-size: 0.625rem;
        }

        /* Keep text visible on mobile */
        .breadcrumb-action-btn span {
            display: inline;
        }

    .breadcrumb-icon {
        width: 18px;
        height: 18px;
    }

    .dropdown-arrow {
        width: 10px;
        height: 10px;
    }

    .breadcrumb-separator {
        font-size: 16px;
        margin: 0 2px;
    }

    /* Truncate breadcrumb text on mobile */
    .breadcrumb-item-first .breadcrumb-text {
        max-width: 60px;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 120px;
    }

    .breadcrumb-text {
        max-width: 80px;
    }
}

@media (max-width: 575.98px) {
    .breadcrumb-container {
        padding: 8px 12px;
        gap: 6px;
    }

        .breadcrumb-container .breadcrumb {
            font-size: 10px;
        }

        .breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 3px;
            width: 13px;
            height: 13px;
            background-size: 13px 13px;
        }

    .share-dropdown .dropdown-item {
        font-size: 10px;
    }

    .share-dropdown .dropdown-menu {
        padding:0;
    }

    .breadcrumb-action-btn {
        font-size: 12px;
        padding: 4px 6px;
        gap: 3px;
    }

    .breadcrumb-icon {
        width: 16px;
        height: 16px;
    }

    .breadcrumb-separator {
        font-size: 14px;
    }

    /* More aggressive truncation on very small screens */
    .breadcrumb-item-first .breadcrumb-text {
        max-width: 50px;
    }

    .breadcrumb-item-current .breadcrumb-text {
        max-width: 100px;
    }

    .breadcrumb-text {
        max-width: 60px;
    }
}

/* ============================================================================
   Global Button Styles
   ============================================================================ */

/* Yellow CTA Button - Yellow background with blue text */
.btn-cta-yellow {
    display: inline-block;
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 700;
    /*    font-size: 0.875rem;*/
    padding: .8rem 2rem;
    border-radius: 50px;
    text-decoration: none !important;
    border: 1px solid #FFD255;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    text-align: center;
}

    .btn-cta-yellow:hover {
        background-color: #ffffff;
        border: 1px solid #ffd255;
        text-decoration: none !important;
    }

    .btn-cta-yellow:active,
    .btn-cta-yellow:focus {
        background-color: #1e3268;
        color: #FFD255;
        border-color: #1e3268;
        text-decoration: none;
        outline: none;
    }

/* White CTA Button - White background with blue text */
.btn-cta-white {
    display: inline-block;
    background-color: #FFFFFF;
    color: #1e3268;
    font-weight: 700;
    font-size: 1rem;
    padding: .8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

    .btn-cta-white:hover {
        background-color: #1e3268;
        color: #FFFFFF;
        border: 2px solid #ffffff;
        text-decoration: none;
    }

    .btn-cta-white:active,
    .btn-cta-white:focus {
        background-color: #1e3268;
        color: #FFFFFF;
        border-color: #FFFFFF;
        text-decoration: none;
        outline: none;
    }

.btn-primary {
    background-color: #1E3268;
    border: 2px solid #1E3268;
    border-radius: 50rem;
    color: #fff;
    font-weight: 600;
    padding: .8rem 2rem;
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background-color: #fff;
        color: #1E3268;
        border-color: #1E3268;
    }

/* ============================================================================
   Site Header & Navigation
   ============================================================================ */

.sticky-header-wrapper {
    z-index: 1050;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hero banner pages - fixed position header */
.has-hero-banner .sticky-header-wrapper.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.site-header {
    position: relative;
    z-index: 1040;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    justify-content: center;
    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}

/* Hero banner pages: site-header starts transparent */
.has-hero-banner .site-header {
    background: transparent;
}

/* Site header becomes white when scrolled past hero (only on hero pages) */
.has-hero-banner .sticky-header-wrapper.header-scrolled .site-header {
    background: #ffffff;
    border-bottom: 1px solid #dde0e9;
}

.nav-pill-shell {
    background-color: #ffffff;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0.5rem 1rem;
    gap: 4rem;
    width: 100%;
    margin: 0 auto;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hero banner pages: nav-pill starts as transparent pill */
.has-hero-banner .nav-pill-shell {
    background-color: rgb(255 254 254 / 90%);
    border-radius: 9999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0.5rem;
    width: 95%;
}

/* Nav pill becomes full width white when scrolled (only on hero pages) */
.has-hero-banner .sticky-header-wrapper.header-scrolled .nav-pill-shell {
    background-color: #ffffff;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    width: 100%;
    padding: 0.5rem 1rem;
}

/* Tablet/Mobile: hero banner pages use a full-width header (no pill shell),
   matching the header-scrolled layout but keeping the transparent background */
@media (max-width: 991.98px) {
    .has-hero-banner .nav-pill-shell {
        background-color: transparent;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        width: 100%;
        padding: 0.5rem 1rem;
    }

    .has-hero-banner .site-header {
        background: rgb(255 255 255 / 80%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .has-hero-banner .sticky-header-wrapper.header-scrolled .site-header {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid #dde0e9;
    }
}

.site-logo {
    padding-left: 0.5rem;
}

    .site-logo .c-logo-svg__desktop {
        width: 96px;
        height: auto;
    }

@media (max-width: 768px) {
    .site-logo {
        padding-left: 0.25rem;
    }

        .site-logo .c-logo-svg__desktop {
            width: 94px;
        }

    .site-header {
        justify-content: center;
    }

    .btn-cta-yellow {
        font-size: 0.875rem;
    }
}

/* ============================================================================
   Header Component Styles
   ============================================================================ */

/* Header Section - Default: solid dark blue for all pages */
.header-section {
    background-color: #1e3268;
    color: #ffffff;
    border: 1px solid #1e3268;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* Hero banner pages: header-section starts transparent */
.has-hero-banner .header-section {
    background-color: rgb(255 254 254 / 90%);
    color: #1e3268;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Header section becomes dark blue when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .header-section {
    background-color: #1e3268;
    color: #ffffff;
    border-color: #1e3268;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-container {
    position: relative;
}

.header-row {
    min-height: 50px;
}

/* Social Links */
.social-link {
    color: #ffffff;
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: social links start dark blue */
.has-hero-banner .social-link {
    color: #1e3268;
}

/* Social links become white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .social-link {
    color: #ffffff;
}

.social-icon {
    width: 36px;
    height: 36px;
    display: block;
}

.social-fallback {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #1e3268;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.header-scrolled .social-fallback {
    background: #ffffff;
    color: #1e3268;
}

.social-fallback-hidden {
    display: none;
}

/* Quick Links */
.header-right-content {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-right: 15rem;
}

.quick-link {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    transition: color 0.3s ease-in-out;
}

.header-section .quick-link {
    font-weight: 700;
    font-size: 1rem;
}

    .header-section .quick-link:hover {
        text-decoration: underline;
        /*        color: #fff;*/
    }

/* Hero banner pages: quick links start dark blue */
.has-hero-banner .quick-link {
    color: #1e3268;
}

/* Quick links become white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .quick-link {
    color: #ffffff;
}

.quick-link-icon {
    width: 36px;
    height: 36px;
}

/* Search */
.search-container {
    position: absolute;
    right: 220px;
    top: 0;
    bottom: 0;
    display: none; /* Hidden - moved to navigation bar */
    align-items: stretch;
}

.search-form {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 0;
    padding: 0 15px;
    gap: 10px;
}

.search-button {
    border: none;
    background: transparent;
    color: #ffffff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: search button starts dark blue */
.has-hero-banner .search-button {
    color: #1e3268;
}

/* Search button becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-button {
    color: #ffffff;
}

.search-input {
    background-color: transparent !important;
    border: none;
    color: #ffffff;
    width: 200px;
    font-size: 14px;
    padding: 0;
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: search input starts dark blue */
.has-hero-banner .search-input {
    color: #1e3268;
}

/* Search input becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input {
    color: #ffffff;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease-in-out;
}

/* Hero banner pages: placeholder starts dark blue */
.has-hero-banner .search-input::placeholder {
    color: rgba(30, 50, 104, 0.5);
}

/* Placeholder becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
    outline: none;
    box-shadow: none !important;
    background-color: transparent !important;
}

.search-input:active {
    background-color: transparent !important;
}

.search-input:-webkit-autofill,
.search-input:-webkit-autofill:hover,
.search-input:-webkit-autofill:focus,
.search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: transparent !important;
}

/* Hero banner pages: autofill starts dark blue */
.has-hero-banner .search-input:-webkit-autofill,
.has-hero-banner .search-input:-webkit-autofill:hover,
.has-hero-banner .search-input:-webkit-autofill:focus,
.has-hero-banner .search-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1e3268 !important;
}

/* Autofill becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input:-webkit-autofill,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:hover,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:focus,
.has-hero-banner .header-scrolled .search-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
}

.search-input::selection {
    background-color: #1e3268;
    color: #ffffff;
}

/* Hero banner pages: selection starts dark blue */
.has-hero-banner .search-input::selection {
    background-color: rgba(30, 50, 104, 0.2);
    color: #1e3268;
}

/* Selection becomes white when scrolled (only on hero pages) */
.has-hero-banner .header-scrolled .search-input::selection {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Donate Button */
.donate-button {
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 800;
    font-size: 1rem;
    padding: 0 40px;
    text-decoration: none;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 3rem;
    top: 0.1rem;
    bottom: 0.1rem;
    border: 2px solid transparent;
}

    .donate-button:hover {
        color: #1e3268;
        background-color: #ffffff;
        border: 2px solid #FFD255;
    }

/*# Home banner #*/
.banner-section {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 580px;
    width: 100%;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 60%;
    text-align: left;
    margin-bottom: 1rem;
}

    .banner-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.5) 100%);
        z-index: 0;
        pointer-events: none;
    }

.banner-heading,
.banner-text {
    position: relative;
    z-index: 1;
}

/*# Form */
div.contact-us-form .form-field {
    margin-bottom: 0.8rem;
}

div.contact-us-form .form-field-label {
    margin-bottom: 0.3rem;
}

div.contact-us-form .form-field-label-required:after {
    content: "*";
    color: #B4594A;
}

div.contact-us-form .input-style {
    padding: 0.4rem;
    width: 60%;
}

div.contact-us-form .editing-form-control-nested-control input,
div.contact-us-form .editing-form-control-nested-control textarea {
    padding: 0.4rem;
    width: 60%;
}

div.contact-us-form .editing-form-control-nested-control textarea {
    width: 100%;
    height: 6rem;
}

div.contact-us-form .field-validation-error {
    font-weight: bold;
    color: #D12127;
}

div.contact-us-form input[type="submit"] {
    -webkit-appearance: button;
    padding: 0.6rem 2rem;
    cursor: pointer;
    color: #ffffff;
    background-color: #272219;
    border: none;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.875rem;
}

    div.contact-us-form input[type="submit"]:hover {
        background: rgba(39, 34, 25, 0.8);
    }

div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-text {
    max-width: calc(100% - 26px);
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    display: inline-block;
}

div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-icon-button {
    font-family: "Core-icons";
    font-size: 20px;
    position: absolute;
    right: 8px;
    color: #504e4c;
    line-height: 24px;
}

    div.contact-us-form .ktc-file-component-wrapper .ktc-uploader-icon-button[data-icon="select"]::before {
        content: "\e6d3";
        cursor: pointer;
    }

/*# Modern Carousel Widget - Full Width Image with Overlay #*/
.modern-carousel {
    overflow: hidden;
    margin-top: 0;
}

    /* Full-width Image Container - 1.65 aspect ratio on desktop (W:H) */
    .modern-carousel .carousel-fullwidth-container {
        position: relative;
        width: 100%;
        padding-bottom: 60.61%; /* 1.65 aspect ratio = (1/1.65)*100 = 60.61% */
        height: 0;
        overflow: hidden;
    }

        .modern-carousel .carousel-fullwidth-container::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.5) 100%);
            z-index: 1;
            pointer-events: none;
        }

    .modern-carousel .carousel-fullwidth-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    .modern-carousel .carousel-fullwidth-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
    }

    /* Content Box on Left Side - responsive positioning */
    .modern-carousel .carousel-content-box {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 3%; /* Responsive left margin */
        background-color: #1e3268;
        border-radius: 20px;
        padding: 40px;
        width: 35%; /* Responsive width - 35% of container */
        max-width: 600px;
        min-width: 320px;
        z-index: 10;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    .modern-carousel .carousel-preheader {
        color: #FFFFFF;
        font-weight: 400;
        font-size: 0.95rem;
        line-height: 1.4;
        margin: 0 0 12px 0;
        opacity: 0.9;
    }

    .modern-carousel .carousel-icon {
        max-width: 80px;
        height: auto;
        display: block;
    }

    .modern-carousel .carousel-heading {
        color: #FFFFFF;
        font-weight: 700;
        font-size: 2.5rem;
        line-height: 1.2;
        margin: 0 0 16px 0;
        letter-spacing: -0.02em;
    }

    .modern-carousel .carousel-description {
        color: #FFFFFF;
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.6;
        margin: 0 0 20px 0;
        letter-spacing: -0.01em;
    }

    /* CTA Buttons Container */
    .modern-carousel .carousel-cta-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 12px;
    }

    /* CTA Button - White background with blue text */
    .modern-carousel .carousel-cta-btn {
        display: inline-block;
        background-color: #FFFFFF;
        color: #1e3268;
        font-weight: 700;
        font-size: 1rem;
        padding: 14px 32px;
        border-radius: 50px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: -0.01em;
    }

        .modern-carousel .carousel-cta-btn:hover {
            background-color: #f5f5f5;
            color: #1e3268;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
            text-decoration: none;
        }

    /* Carousel Controls Inside Box - Arrows with dots in between */
    .modern-carousel .carousel-controls-inbox {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 12px;
    }

    .modern-carousel .carousel-indicators-inbox {
        position: static !important; /* Override Bootstrap's absolute positioning */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        flex: 0 1 auto; /* Don't grow, allow shrink, auto basis */
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

        .modern-carousel .carousel-indicators-inbox [data-bs-target] {
            position: static !important; /* Override any absolute positioning */
            width: 8px;
            height: 8px;
            margin: 0;
            padding: 0;
            border-radius: 50%;
            border: none;
            background-color: rgba(255, 255, 255, 0.4);
            opacity: 1;
            transition: transform 0.2s ease, background-color 0.2s ease;
            text-indent: 0; /* Reset Bootstrap's -999px */
            flex-shrink: 0;
        }

            .modern-carousel .carousel-indicators-inbox [data-bs-target].active {
                background-color: rgba(255, 255, 255, 1);
                transform: scale(1.2);
            }

    /* Navigation Arrows - Styled for inside the box */
    .modern-carousel .carousel-arrow-btn {
        width: 32px;
        height: 32px;
        background-color: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        position: static;
        transform: none;
        z-index: 10;
        cursor: pointer;
        transition: all 0.25s ease;
        opacity: 1;
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .modern-carousel .carousel-arrow-btn:hover {
            background-color: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
        }

    .modern-carousel .carousel-arrow-icon {
        position: static;
        transform: none;
        font-size: 1.6rem;
        line-height: 0.8;
        color: #ffffff;
        font-weight: 300;
        margin: 0;
        padding: 0;
    }

@media (max-width: 991.98px) {
    .modern-carousel .carousel-content-box {
        left: 2.5%;
        padding: 30px;
        width: 45%; /* Slightly wider on tablet */
        max-width: 500px;
        min-width: 280px;
    }

    .modern-carousel .carousel-preheader {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .modern-carousel .carousel-icon {
        max-width: 60px;
    }

    .modern-carousel .carousel-heading {
        font-size: 2rem;
    }

    .modern-carousel .carousel-description {
        font-size: 1rem;
    }

    .modern-carousel .carousel-arrow-btn {
        width: 28px;
        height: 28px;
    }

    .modern-carousel .carousel-arrow-icon {
        font-size: 1.4rem;
    }

    .modern-carousel .carousel-indicators-inbox [data-bs-target] {
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 575.98px) {
    /* Mobile: 0.57 aspect ratio for hero (portrait) */
    .modern-carousel .carousel-fullwidth-container {
        padding-bottom: 175.44%; /* 1/0.57 * 100 = 175.44% for 0.57 aspect ratio */
    }

    /* Mobile: flexible content box - align to bottom */
    .modern-carousel .carousel-content-box {
        top: auto;
        transform: none; /* Remove transform for bottom alignment */
        bottom: 2rem; /* 2rem margin from bottom */
        left: 20px;
        right: 20px;
        padding: 24px;
        width: calc(100% - 40px);
        min-height: auto;
    }

    .modern-carousel .carousel-preheader {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .modern-carousel .carousel-icon {
        max-width: 50px;
    }

    .modern-carousel .carousel-heading {
        font-size: 1.5rem;
    }

    .modern-carousel .carousel-description {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }

    .modern-carousel .carousel-cta-buttons {
        margin-bottom: 16px;
    }

    .modern-carousel .carousel-cta-btn {
        font-size: 0.9rem;
        padding: 12px 24px;
    }

    .modern-carousel .carousel-arrow-btn {
        width: 24px;
        height: 24px;
    }

    .modern-carousel .carousel-arrow-icon {
        font-size: 1.2rem;
    }

    .modern-carousel .carousel-controls-inbox {
        gap: 6px;
    }

    .modern-carousel .carousel-indicators-inbox {
        gap: 4px;
    }

        .modern-carousel .carousel-indicators-inbox [data-bs-target] {
            width: 6px;
            height: 6px;
        }
}

/* Large Desktop - Maintain 1.65 aspect ratio with max height constraint */
@media (min-width: 1400px) {
    .modern-carousel .carousel-fullwidth-container {
        max-height: 850px; /* Cap height for very wide screens */
    }
}

/* Remove old carousel styles that are no longer needed */
.modern-carousel .carousel-indicators-custom,
.modern-carousel .slide-number,
.modern-carousel .indicators-wrapper,
.modern-carousel .indicator-bar,
.modern-carousel .carousel-nav-btn,
.modern-carousel .carousel-nav-buttons {
    display: none !important;
}

/* Generic CTA Component Styles */

/* Light Blue Theme */
.generic-cta-light-blue {
    background-color: #00b2eb;
    color: white;
}

    .generic-cta-light-blue .generic-cta-title {
        color: white;
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
    }

    .generic-cta-light-blue .generic-cta-description {
        color: white;
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .generic-cta-light-blue .generic-cta-button {
        background-color: white;
        color: #00b2eb;
        border-color: white;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .generic-cta-light-blue .generic-cta-button:hover {
            background-color: #f8f9fa;
            color: #00b2eb;
            border-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
        }

/* Dark Blue Theme */
.generic-cta-dark-blue {
    background-color: #1E3268;
    color: white;
    border-radius: 8px;
    padding: 4rem 2rem;
}

    .generic-cta-dark-blue .generic-cta-title {
        color: white;
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .generic-cta-dark-blue .generic-cta-description {
        color: white;
        font-size: 1.5rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .generic-cta-dark-blue .generic-cta-button {
        background-color: #FFD255;
        color: #1E3268;
        border: 1px solid #FFD255;
        font-weight: 700;
        border-radius: 8px;
        padding: 1rem 3rem !important;
        font-size: 1.25rem;
        transition: all 0.3s ease;
        text-transform: none;
    }

        .generic-cta-dark-blue .generic-cta-button:hover {
            background-color: #ffdd7a;
            color: #1E3268;
            border: 1px solid #ffdd7a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 210, 85, 0.4);
        }

/* White Theme */
.generic-cta-white {
    background-color: white;
    color: #212529;
}

    .generic-cta-white .generic-cta-title {
        font-weight: 700;
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
        line-height: 1.2;
    }

    .generic-cta-white .generic-cta-description {
        font-size: 1.25rem;
        line-height: 1.7;
    }

    .generic-cta-white .generic-cta-button {
        background-color: #FFD255;
        color: #1E3268;
        border: 1px solid #FFD255;
        font-weight: 600;
        transition: all 0.3s ease;
        border-radius: 52.47px !important;
    }

        .generic-cta-white .generic-cta-button:hover {
            background-color: #0b5ed7;
            color: white;
            border: 1px solid #0a58ca;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

/* Common CTA Styles */
.generic-cta {
    background-color: #1E3268;
    color: white;
    border-radius: 8px;
}

.generic-cta-title {
    margin-bottom: 0;
    color: white;
    text-align: center;
}

.generic-cta-description {
    margin-bottom: 0;
    color: white;
    text-align: center;
}

.generic-cta-button {
    background-color: #FFD255;
    color: #1E3268;
    border-color: #FFD255;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    letter-spacing: -0.02em;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .generic-cta-button:hover {
        background-color: #ffdd7a;
        color: #1E3268;
        border-color: #ffdd7a;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 210, 85, 0.4);
    }

.generic-cta-image img {
    width: 100%;
    height: auto;
}

.generic-cta-decorative-line {
    height: 4px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.generic-cta-pretitle {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.generic-cta-light-blue .generic-cta-pretitle {
    color: white;
}

.generic-cta-dark-blue .generic-cta-pretitle {
    color: white;
}

.generic-cta-white .generic-cta-pretitle {
    color: #1E3268;
}

.generic-cta-text-container {
    padding: 0;
    text-align: center;
}

.generic-cta-button-container {
    text-align: center;
}

/* Yellow Pill Button Style */
.c-button-sec {
    display: inline-block;
    background-color: #FFD255;
    color: #1e3268;
    font-weight: 700;
    font-size: 0.9rem;
    padding: .9375rem 1.15625rem;
    border-radius: 50px;
    text-decoration: none !important;
    border: 2px solid #FFD255;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

    .c-button-sec:hover {
        background-color: #ffffff;
        color: #1e3268 !important;
        border: 2px solid #FFD255;
        text-decoration: none !important;
    }

@media (max-width: 991.98px) {
    .generic-cta-title {
        font-size: clamp(1.5rem, 1.5rem + 0.5vw, 2rem);
    }

    .generic-cta-description {
        font-size: 1.125rem;
    }

    .generic-cta-button {
        font-size: 0.875rem;
        padding: 0.625rem 1.5rem !important;
    }

    .generic-cta-text-container {
        padding: 2rem 0;
    }
}

/* ============================================================================
   Guidelines Chapter Page Styles
   ============================================================================ */

.guidelines-chapter-page {
    background-color: #fff;
}

.chapter-banner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.banner-content {
    max-width: 1400px;
    margin: 0 auto;
}

.chapter-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
}

.page-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

.action-buttons .btn,
.navigation-buttons .btn {
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    border: none;
}

.action-buttons .btn-light {
    background-color: white;
    color: #1e3268;
}

    .action-buttons .btn-light:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.navigation-buttons .btn-outline-light:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
}



/* Tab/Pill Navigation Styling - matching CampPage */
.nav-tabs {
    border-bottom: none !important;
}

    .nav-tabs .nav-link {
        color: #2c4770;
        border: none;
        border-bottom: 4px solid transparent;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }

        .nav-tabs .nav-link:hover {
            color: #1e3a5f;
            border-bottom: 4px solid #00b2eb;
            background-color: transparent;
        }

/*        .nav-tabs .nav-link.active {
            color: #1e3a5f;
            border-bottom-color: #00bcd4;
            background-color: transparent;
            font-weight: 600;
        }*/

.tab-content {
    min-height: 200px;
}


    /*.nav-tabs .nav-link {
        color: #6c799d;
        font-weight: 600;
        font-size: 1rem;
        padding: 1rem 1.5rem;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
    }*/

        .nav-tabs .nav-link.active {
            color: #1e3268;
            background-color: transparent;
            border-bottom: 4px solid #00b2eb;
        }

        /*.nav-tabs .nav-link.disabled {
            color: #adb5bd;
            cursor: not-allowed;
            opacity: 0.5;
        }

        .nav-tabs .nav-link:hover:not(.disabled):not(.active) {*/
            /*    background-color: #f8f9fa;
    border-bottom: 3px solid #dee2e6;*/
        /*}*/

.chapter-content {
    min-height: 300px;
    line-height: 1.5;
    font-size: 1.125rem;
    color: #1e3268;
}

.chapter-headings {
    margin-bottom: 2.5rem;
}

    .chapter-headings h1,
    .chapter-headings h2,
    .chapter-headings h3,
    .chapter-headings h4,
    .chapter-headings h5,
    .chapter-headings h6 {
        color: #1e3268;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

        .chapter-headings h1:first-child,
        .chapter-headings h2:first-child,
        .chapter-headings h3:first-child,
        .chapter-headings h4:first-child,
        .chapter-headings h5:first-child,
        .chapter-headings h6:first-child {
            margin-top: 0;
        }

.key-messages {
    background: #fafbfb;
    padding: 1rem .5rem 0;
    border-top: 4px solid #00b2eb;
    /*    margin-bottom: 2.5rem;*/
}

.chapterRecommendations {
    border-top: 4px solid #00B2EB;
    background: rgba(245, 246, 246, 0.45);
    padding: 1.5rem;
}

    .chapterRecommendations > :last-child {
        border-top: 1px solid #00B2EB;
        padding-top: 1.5rem;
    }

    .chapterRecommendations ol {
        margin-bottom: 1.5rem !important;
    }

/* No border/padding when shown inside the Recommendations tab */
#recommendations .chapterRecommendations {
    border-top: none;
    padding: 0;
}

.chapterKeyMessages h2, .chapterRecommendations h2 {
    margin-top: 0;
}

    .chapterKeyMessages h2:not(:first-of-type) {
        border-top: 1px solid #00B2EB;
        padding-top: 1.5rem;
    }

    .key-messages .chapterKeyMessages h2:not(:first-of-type) {
        margin-left: -.5rem;
        margin-right: -.5rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

.key-messages .key-messages-heading {
    color: #2e7d32;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #4caf50;
}

.key-messages ul,
.key-messages ol {
    margin-bottom: 0.5rem;
    padding-left: 2rem;
}

.key-messages li {
    margin-bottom: 0.75rem;
    font-weight: 400;
}



.chapter-content h2 {
    color: #1e3268;
    margin-bottom: 1.25rem;
    font-weight: 600;
    font-size: 1.75rem;
    padding-bottom: 0.5rem;
}

.chapter-content h3 {
    color: #34495e;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.4rem;
}

.chapterReferences h2 {
    margin-top: 0;
}

.chapter-content p {
    margin-bottom: 1.5rem;
}

.chapter-content ol{
    margin-bottom: 0;
    padding-left: 2.5rem;
}

.chapter-content ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.chapterKeyMessages ul,
.chapterKeyMessages ol {
    padding-left: 1.5rem;
}

.chapterKeyMessages ul {
    padding-bottom: 1.5rem;
}

.mainText table li::marker {
    color: #00b2eb;
}

li::marker {
    color: #00b2eb;
}

ol li::marker {
    color: #1e3268;
}

li p {
    margin-bottom: 0.5rem !important;
}

li ul:not(.mega-menu-list):not(.mobile-nav-list) > li {
    list-style-type: disc;
}


.mainText li:has(a)::marker {
    /*    color: #8248d4;*/
}

.chapter-content table li::marker {
    font-size: 12px;
}

.chapterContents ul,
.chapterContents ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.chapterContents p {
    font-size: 26px;
}

.chapter-content li {
    /*    margin-bottom: 0.75rem;*/
}

.chapter-content a {
    transition: all 0.3s ease;
    font-weight: 500;
}

    .chapter-content a:hover {
        /*    color: #2980b9;
    border-bottom-color: #2980b9; */
    }

.chapter-headings a {
    color: #6B27CC;
    font-size: 1.0rem;
}

@media (max-width: 576px) {
    .chapter-headings a {
        font-size: 0.875rem;
    }

    .chapter-content {
        font-size: 0.875rem;
    }

        .chapter-content table th {
            font-size: 1.25rem !important;
        }

    .tableSubHead {
        font-size: 0.875rem !important;
    }

    .chapter-content tfoot {
        font-size: 0.75rem !important;
    }
}

.chapter-content figure,
.chapter-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chapter-content figcaption {
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
    margin-top: 0.75rem;
    text-align: center;
}

.chapter-content table {
    width: 100%;
    margin-bottom: 0.5rem;
    border-collapse: collapse;
    /*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
}

    .chapter-content table th,
    .chapter-content table td {
        padding: 1rem;
        border: 1px solid #dee2e6;
        text-align: left;
    }

    .chapter-content table th {
        font-weight: 600;
        font-size: 1.4rem;
    }

.chapter-content tr {
    border-bottom: 1px solid #00b2eb;
}

.chapter-content td.lastRow {
    border-top: 4px solid #00b2eb !important;
}

.chapter-content thead, .chapter-content .firstRow, tr.firstRowB, tr.firstRowA td.lastRow {
    border-bottom: 4px solid #00b2eb !important;
}

.chapter-content tr.firstRow {
    font-weight: 600;
}

tr.firstRowA {
    border-bottom: none;
}

.chapter-headings strong {
    font-size: 1.5rem;
    font-weight: 600;
}



.chapter-content tfoot {
    border-top: 4px solid #00b2eb;
    font-size: 0.875rem;
    line-height: 1.3;
}

.tableSubHead {
    font-weight: 400;
    font-size: 1.125rem;
}

tfoot.tableFootnote tr {
    border: none;
}

tfoot.tableFootnote td {
    padding: 6px;
}


.chapter-content th, .chapter-content td {
    border: none !important;
}



.chapter-content table tr:nth-child(even) {
    /*    background-color: #f8f9fa;*/
}

blockquote {
    position: relative;
    padding: 2rem 4rem 2rem 8rem;
    margin: 3rem 0;
    font-style: italic;
    color: #1e3268;
    background-color: #F3FCFF;
    border: none;
}

    blockquote::before {
        content: "\201C";
        position: absolute;
        left: 50px;
        top: 40px;
        font-size: 4rem;
        line-height: 0.8;
        color: #1e3268;
        font-weight: 700;
        font-family: sans-serif;
        font-style: normal;
    }

    blockquote p {
        font-size: 1.1rem;
        font-weight: 500;
        font-style: italic;
        color: #1e3268;
        line-height: 1.8;
        margin-bottom: 0;
    }

        blockquote p em {
            font-style: italic;
        }

.references-section {
    padding-top: 2rem;
    margin-top: 3rem;
}

    .references-section .references-heading {
        color: #1e3268;
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #4FC3F7;
    }

    .references-section ol,
    .references-section ul {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .references-section li {
        margin-bottom: 1rem;
        padding-left: 0.5rem;
    }

table.CPG_appendix td, table.quick_ref_guide td {
    border: solid #ccc 1px;
    padding: 5px 10px;
    font-size: 14px;
}

table.CPG_appendix, table.quick_ref_guide {
    border-collapse: separate;
    border-spacing: 0;
    border: solid #000 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
}

.greyTableHeader {
    background-color: #CCC;
}

.darkgreyTableHeader {
    background-color: #999;
}

.blackTableHeader {
    background-color: #000;
    color: #FFF;
}

/* ============================================================================
   Global Table Styles
   ============================================================================ */

/* Global table styles - Applied to all tables except those in .chapter-content */
table:not(.chapter-content table):not(.nutrition-content table) {
    width: 100%;
    margin-bottom: 2rem;
    border-collapse: collapse;
}

    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        padding: 1rem;
        border: 1px solid #dee2e6;
        text-align: left;
        font-size: 1rem;
    }

@media (max-width: 576px) {
    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        font-size: 0.75rem;
    }
}

    table:not(.chapter-content table):not(.nutrition-content table) th {
        font-weight: 600;
    }

    table:not(.chapter-content table):not(.nutrition-content table) tr {
        border-bottom: 1px solid #00b2eb;
    }

        table:not(.chapter-content table):not(.nutrition-content table) thead,
        table:not(.chapter-content table):not(.nutrition-content table) .firstRow,
        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowB,
        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowA td.lastRow,
        {
            border-bottom: 4px solid #00b2eb !important;
        }

        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRow {
            font-weight: 600;
        }

        table:not(.chapter-content table):not(.nutrition-content table) tr.firstRowA {
            border-bottom: none;
        }

    table:not(.chapter-content table):not(.nutrition-content table) tfoot {
        border-top: 4px solid #00b2eb;
    }

    table:not(.chapter-content table):not(.nutrition-content table) th,
    table:not(.chapter-content table):not(.nutrition-content table) td {
        border: none !important;
    }

    table:not(.chapter-content table):not(.nutrition-content table) tr:nth-child(even) {
        background-color: #f8f9fa;
    }

table:not(.chapter-content table):not(.nutrition-content table) tr:last-child {
    border-bottom: 4px solid #00b2eb;
}

/* Copy Table Button */
.copy-table-button {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 1.5rem;
    background-color: #FFD255;
    color: #1e3268;
    border: 2px solid #FFD255;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .copy-table-button:hover {
        background-color: white;
        color: #1e3268;
        border: 2px solid #FFD255;
    }

    .copy-table-button:active {
        background-color: white;
        color: #1e3268;
        border: 2px solid #FFD255;
    }

/* Mobile Current Page Bar */
.mobile-current-page {
    background: #ffd255;
    padding: 1rem 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

    .mobile-current-page:hover {
        background: #ffd255;
    }

    .mobile-current-page .current-page-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #1e3268;
        font-weight: 700;
    }

    .mobile-current-page .current-label {
        font-size: 0.875rem;
        margin-right: 0.5rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .mobile-current-page .current-title {
        flex: 1;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-current-page .chevron-icon {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

/* ============================================================================
   Sticky Sidebar Implementation (Bootstrap 5 Compatible)
   Based on: https://getbootstrap.com/docs/5.0/helpers/position/#sticky-top
   ============================================================================ */

/* Sidebar Column — sticky is applied here, directly on the Bootstrap flex-item col.
   align-self: flex-start ensures the column only takes its own content height,
   NOT the full row height, so the sticky element has room to travel while scrolling. 
   The negative top value allows the sidebar to scroll up with the page initially, 
   then stick when it reaches the top of the viewport. */
.sidebar-column {
    position: sticky;
    top: 80px; /* Adjusted to stick right under the header/breadcrumb area */
    align-self: flex-start !important;
    z-index: 100;
    padding-left: 1.5rem;
    height: calc(100vh - 80px); /* Fill the full sticky viewport slot so the whole column captures scroll */
    /* Scroll is applied directly on the aside column so it works anywhere within it */
    overflow-y: auto;
    overflow-x: clip;
    /* Prevent scroll chaining to the page body when sidebar scroll reaches its edges */
    overscroll-behavior: contain;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar while keeping the sidebar scrollable */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

    /* Hide scrollbar for webkit browsers */
    .sidebar-column::-webkit-scrollbar {
        display: none;
        width: 0;
    }



/* Inner wrapper - no longer the scroll container, just spacing */
.sticky-sidebar-inner {
    padding: 2rem 0rem;
}

/* Layout Styles */
@media (min-width: 992px) {
    .guidelines-chapter-page .row {
        align-items: flex-start !important;
    }
}

/* Banner adjustments when inside column layout */
.chapter-banner {
    /*    margin-bottom: 2rem;*/
    overflow: hidden;
}

/* Side Navigation Section */
.sidebar-navigation {
    margin-bottom: 2rem;
}

.sidebar-section {
    margin-bottom: 2rem;
    border-bottom: 2px solid #DDE0E9;
    padding-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .sidebar-section {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .collapse.show {
        padding: 20px;
    }
}

    .sidebar-navigation .sidebar-section:last-child {
        margin-bottom: 0;
    }

    .sidebar-section:last-of-type {
        border-bottom: none;
    }

    /* Section Header */
    .sidebar-section-header {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1e3268;
        text-transform: uppercase;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        letter-spacing: 0.5px;
        line-height: 1.4;
    }

        .sidebar-section-header .section-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            flex-shrink: 0;
        }

    /* Section Items List */
    .sidebar-section-items {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .sidebar-section-items li {
            margin-bottom: 0.5rem;
        }



        .sidebar-section-items a {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: #34495e;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.2s ease;
            font-size: 0.813rem;
        }

            .sidebar-section-items a .item-icon {
                width: 16px;
                height: 16px;
                object-fit: contain;
                flex-shrink: 0;
            }

            .sidebar-section-items a:hover {
                background-color: #ffd255;
                color: #1e3268;
            }

        .sidebar-section-items li.active a {
            background-color: #e3f2fd;
            color: #1e3268;
            font-weight: 600;
        }

    @media (min-width: 992px) {
        .sidebar-column {
            flex: 0 0 27% !important;
            max-width: 27% !important;
            padding-left: 80px !important;
            padding-right: 24px !important;
            border-right: 1px solid #EAEBF1;
        }

            .sidebar-column ~ .col-lg-9 {
                flex: 0 0 73% !important;
                max-width: 73% !important;
            }
    }

    /* First/Last Section Pill Button Styles (for HCP navigation) */
    .sidebar-section.first-section .sidebar-section-items.pill-grid,
    .sidebar-section.last-section .sidebar-section-items.pill-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

        .sidebar-section.first-section .sidebar-section-items.pill-grid li,
        .sidebar-section.last-section .sidebar-section-items.pill-grid li {
            margin-bottom: 0;
        }

        .sidebar-section.first-section .sidebar-section-items.pill-grid a,
        .sidebar-section.last-section .sidebar-section-items.pill-grid a {
            justify-content: center;
            text-align: center;
            padding: 0.75rem 0.5rem;
            border-radius: 50px;
            border: 1px solid #e5e8ee;
            background-color: #ffffff;
            color: #1e3268;
            font-weight: 400;
            font-size: 0.75rem;
        }

            .sidebar-section.first-section .sidebar-section-items.pill-grid a:hover,
            .sidebar-section.last-section .sidebar-section-items.pill-grid a:hover {
                background: #1e3268;
                color: #ffffff;
            }

        .sidebar-section.first-section .sidebar-section-items.pill-grid li.active a,
        .sidebar-section.last-section .sidebar-section-items.pill-grid li.active a {
            background-color: #1e3268;
            color: #ffffff;
        }

        .sidebar-section.first-section .sidebar-section-items.pill-grid a .item-icon,
        .sidebar-section.last-section .sidebar-section-items.pill-grid a .item-icon {
            display: none;
        }

    /* Metadata and Navigation Button Styles */
    .metadata {
        color: white !important;
    }

    .nav-btn-enabled {
        border: 2px solid rgba(255,255,255,0.3) !important;
        color: white !important;
    }

        .nav-btn-enabled:hover {
            background-color: rgba(255,255,255,0.1) !important;
            border-color: rgba(255,255,255,0.5) !important;
            color: white !important;
        }

    .nav-btn-disabled {
        border: 2px solid rgba(255,255,255,0.2) !important;
        opacity: 0.5 !important;
        color: white !important;
    }

    /* Page TOC */
    .sidebar-toc {
        background: transparent;
        border-radius: 0;
        margin-top: 1rem;
        border-top: 2px solid #b2b9cd;
    }

    .sidebar-heading {
        font-size: 0.875rem;
        font-weight: 700;
        color: #1e3268;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        letter-spacing: 1px;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc-item {
        margin-bottom: 0.25rem;
    }

        .toc-item a {
            display: block;
            padding: 0.5rem 0;
            color: #34495e;
            text-decoration: none;
            border-left: 3px solid transparent;
            padding-left: 0.75rem;
            transition: all 0.2s ease;
            font-size: 0.813rem;
        }

        .toc-item.toc-level-3 a {
            padding-left: 1.5rem;
            font-size: 0.85rem;
        }

        .toc-item a:hover {
            color: #1e3268;
            background-color: #ffd255;
            font-weight: 700;
        }

        .toc-item.active a {
            color: #1e3268;
            font-weight: 600;
        }

    /* ============================================================================
   Content Editor Widget Styles
   ============================================================================ */

    .content-editor-widget .content-wrapper {
        border-radius: 8px;
    }

        .content-editor-widget .content-wrapper.bg-white {
            background-color: #FFFFFF;
        }

        .content-editor-widget .content-wrapper.bg-light-blue {
            background-color: #00B2EB;
        }

        .content-editor-widget .content-wrapper.bg-purple {
            background-color: #DCBDFF;
        }

        .content-editor-widget .content-wrapper.bg-navy {
            background-color: #1e3268;
        }

        .content-editor-widget .content-wrapper > * {
            padding: 2rem;
        }

            .content-editor-widget .content-wrapper > *:first-child {
                padding-top: 2rem;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
            }

            .content-editor-widget .content-wrapper > *:last-child {
                padding-bottom: 2rem;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }

    .content-editor-widget {
        margin: 2rem 0;
    }

    .toc-item.active a:hover {
        color: #1e3268;
        font-weight: 600;
        background-color: #ffd255;
    }

    /* Offcanvas Sidebar Styles */
    .offcanvas .sidebar-navigation {
        border-bottom: 1px solid #e9ecef;
    }

    .offcanvas .sidebar-toc {
        position: static;
        max-height: none;
        background: transparent;
        padding: 0;
        margin-top: 1rem;
    }

    /* ============================================================================
   Footer Styles
   ============================================================================ */

    /* Footer Component Styles */

    .footer-section {
        padding-bottom: 1rem !important;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem !important;
    }

    .footer-container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem;
    }

    .footer-logo img {
        max-width: 202px;
        height: auto;
    }

    .footer-logo-img {
        max-width: 202px;
        height: auto;
    }

    .footer-description-text {
        line-height: 1.5;
    }

    .footer-text-link {
        display: inline-block;
    }

        .footer-text-link:hover {
            text-decoration: underline !important;
        }

    .footer-nav-card-link {
        display: block;
    }

    .footer-social-link:hover .footer-social-link-title {
        text-decoration: underline;
    }

    .footer-quick-link:hover {
        text-decoration: underline !important;
    }

    .footer-quick-link-separator {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .footer-group-title {
        margin-bottom: 1rem;
        margin-top: 0;
        font-size: 1.5rem !important;
    }

    .footer-nav-card {
        margin-bottom: 1rem;
    }

    .footer-nav-card-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .footer-nav-icon img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

    .footer-nav-content {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .footer-nav-description {
        font-size: 1rem;
        line-height: 1.5;
        flex-grow: 1;
        margin-bottom: 1rem;
    }

    .footer-nav-button .btn {
        background-color: #00bcd4;
        border: none;
    }

    .footer-text-link-description {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .footer-newsletter-signup {
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: #334576;
    }

    .footer-newsletter-title {
        margin-bottom: 1.5rem;
        margin-top: 0 !important;
    }

    .footer-newsletter-input {
        padding-right: 3rem;
    }

    .footer-newsletter-submit {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0.75rem;
        text-decoration: none !important;
    }

    .footer-social-icon {
        width: 24px;
        height: 24px;
    }

    .footer-social-link-title, .footer-copyright-text, .footer-quick-link {
        font-size: 1.125rem;
    }

    .footer-divider {
        border-color: rgba(255, 255, 255, 0.25);
    }

    .footer-text-link-title, .footer-text-link, .footer-text-link-description {
        font-size: 1.125rem;
    }

    @media (max-width: 767.98px) {
        .footer-group-title {
            font-size: 1.25rem !important;
        }

        .footer-text-link, .footer-text-link-description {
            font-size: 0.875rem;
        }

        .footer-text-link-title {
            font-size: 1rem;
        }

        .footer-social-link-title, .footer-copyright-text, .footer-quick-link {
            font-size: 0.875rem;
        }
    }

    /* ============================================================================
   Global Category Pill Style
   ============================================================================ */

    .category-pill {
        font-size: 0.875rem !important;
        padding: 0.4rem 0.6rem !important;
        border-radius: 50px !important;
        background-color: #1e3268;
        color: white;
        text-decoration: none;
        display: inline-block;
        border: 1px solid #1e3268;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

        .category-pill:hover {
            background-color: #ffffff;
            color: #1e3268;
            text-decoration: none;
            border: 1px solid #1e3268;
        }

    /* ============================================================================
   Responsive Image Gallery Wrapper
   ============================================================================ */

    /* Wrapper for 4 images: 1 row on desktop, 2 rows on mobile */
    .image-gallery-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        margin: 2rem 0;
    }

        /* Individual image styling */
        .image-gallery-wrapper img {
            flex: 1 1 auto;
            max-width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
        }

    /* Desktop: 4 images in one row */
    @media (min-width: 768px) {
        .image-gallery-wrapper img {
            flex: 1 1 calc(25% - 0.75rem);
            max-width: calc(25% - 0.75rem);
        }
    }

    /* Mobile: 2 images per row (2 rows total) */
    @media (max-width: 767.98px) {
        .image-gallery-wrapper {
            gap: 0.75rem;
        }

            .image-gallery-wrapper img {
                flex: 1 1 calc(50% - 0.375rem);
                max-width: calc(50% - 0.375rem);
            }
    }

    /* ============================================================================
   Responsive Camp Info Table
   ============================================================================ */

    /* Wrapper for borderless, responsive table */
    .camp-info-table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
        border-radius: 8px;
        overflow: hidden;
    }

        .camp-info-table tr:nth-child(even) {
            background-color: transparent !important;
        }

        .camp-info-table thead tr,
        .camp-info-table tbody tr:first-child {
            color: #1e3268;
        }

        .camp-info-table th,
        .camp-info-table td {
            padding: 0 !important;
            text-align: left;
            border: none;
            vertical-align: top;
        }

        .camp-info-table tr {
            border: none !important;
        }

        .camp-info-table tbody tr:not(:first-child) {
            background-color: #ffffff;
        }



        .camp-info-table strong {
            color: inherit;
            font-weight: 600;
        }

    /* Desktop: Full table layout */
    @media (min-width: 768px) {
        .camp-info-table th,
        .camp-info-table td {
            width: 20%;
        }
    }

    /* Mobile: 2 columns layout - Label: Value pairs */
    @media (max-width: 767.98px) {
        .camp-info-table {
            display: block;
            background-color: transparent;
        }

            .camp-info-table thead {
                display: none;
            }

            .camp-info-table tbody {
                display: block;
            }

                .camp-info-table tbody tr {
                    display: block;
                    background-color: transparent !important;
                }

                    .camp-info-table tbody tr:first-child {
                        display: none;
                    }

                    .camp-info-table tbody tr:not(:first-child) {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 1rem 1.5rem;
                        margin-bottom: 0;
                    }

            .camp-info-table td {
                display: block;
                padding: 1rem 0 !important;
                background-color: transparent;
                border-radius: 0;
                box-shadow: none;
                border-bottom: 1px solid #e0e0e0;
            }

                .camp-info-table td:nth-last-child(-n+2) {
                    border-bottom: none;
                }

                .camp-info-table td::before {
                    content: attr(data-label);
                    display: block;
                    font-weight: 600;
                    color: #1e3268;
                    margin-bottom: 0.5rem;
                    font-size: 1rem;
                    letter-spacing: 0;
                }

                .camp-info-table td strong {
                    display: none;
                }
    }

    .category-pill:active {
        transform: translateY(0);
        /*    margin-top: 1.5rem;
    margin-bottom: 1.5rem;*/
    }

    .footer-social-links {
        margin-bottom: 1.0rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        text-align: center;
    }

    /* Mobile: social links in one row, auto-sized and spread edge-to-edge, icons only */
    @media (max-width: 767.98px) {
        .footer-social-links > [class*="col"] {
            flex: 0 0 auto;
            max-width: none;
            width: auto;
            text-align: center;
        }

        .footer-social-links .footer-social-link-title {
            display: none;
        }
    }

    .footer-copyright-row {
        align-items: center;
        margin-bottom: 1rem;
    }

    .footer-quick-links-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    /* ============================================================================
   Icon Feature List Styles
   ============================================================================ */

    .icon-feature-section {
        background-color: #FFB3BA;
        padding: 20px;
        width: 100%;
    }

    .icon-feature-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
        padding: 0 15px;
    }

    .icon-feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 200px;
        font-weight: 600;
    }

    .icon-feature-icon {
        flex-shrink: 0;
    }

        .icon-feature-icon svg {
            display: block;
            width: 24px;
            height: 24px;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .icon-feature-text {
        color: #1e3268;
        font-weight: 600;
        font-size: 1.25rem;
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 768px) {
        .icon-feature-container {
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .icon-feature-item {
            width: 100%;
            min-width: 100%;
            justify-content: center;
        }

        .icon-feature-text {
            font-size: 1.0rem;
        }
    }

    /* Mobile font sizes for chapter content */
    @media (max-width: 768px) {

        .chapter-content p {
            font-size: 0.875rem !important;
        }

        .chapter-content li {
            font-size: 0.875rem !important;
        }

        .chapter-content h2 {
            font-size: 1.5rem !important;
        }

        .references-section {
            margin-top: 0 !important;
        }
    }

    @media (min-width: 768px) {
        .footer-quick-links-container {
            justify-content: flex-end;
        }
    }


    @media (max-width: 992px) {
        .banner-content .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
        }

        .navigation-buttons {
            width: 100%;
            margin-top: 1rem;
        }
    }

    @media (max-width: 768px) {
        .chapter-banner .banner-content {
            padding: 2rem 1rem !important;
        }

        .page-title {
            font-size: 1.75rem !important;
        }

        .chapter-label {
            font-size: 0.85rem !important;
        }

        .action-buttons {
            flex-direction: column;
            width: 100%;
        }

            .action-buttons .btn,
            .action-buttons a {
                width: 100%;
                justify-content: center;
            }

        .navigation-buttons {
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
        }

            .navigation-buttons .btn,
            .navigation-buttons a {
                flex: 1 1 50%;
                min-width: 0;
                justify-content: center;
            }

        .nav-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
        }

            .nav-tabs .nav-item {
                flex-shrink: 0;
            }

            .nav-tabs .nav-link {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
    }

    @media (max-width: 576px) {
        .metadata .d-flex {
            align-items: flex-start !important;
        }

            .metadata .d-flex > * {
                margin-bottom: 0.5rem;
            }
    }

    /* ============================================================================
   Form Widget Area Styles
   ============================================================================ */

    .form-page-content-wrapper {
        max-width: 80%;
    }

    .generic-page-content-wrapper,
    .sub-page-content-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }

    .form-widget-area-container {
        width: 100%;
    }

    .form-widget-area {
        padding: 2rem 2rem 2rem 0;
        max-width: 80%;
    }

        /* Form Styling */
        .form-widget-area .form-field {
            margin-bottom: 2rem;
        }

        .form-widget-area label.control-label {
            display: block;
            color: #1e3268;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        /* Checkbox List Styling */
        .form-widget-area .ktc-checkbox-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .form-widget-area .ktc-checkbox {
            display: flex;
            align-items: center;
            position: relative;
        }

        .form-widget-area .form-field:has(.ktc-checkbox) {
            display: block !important;
        }

        .form-widget-area .ktc-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 0;
            margin-right: 0.75rem;
            cursor: pointer;
            flex-shrink: 0;
        }

        .form-widget-area .ktc-checkbox label {
            display: inline-block;
            color: #1e3268;
            font-size: 1rem;
            font-weight: 400;
            margin: 0;
            cursor: pointer;
            line-height: 1.5;
            padding-left: 10px;
        }

        .form-widget-area .ktc-checkbox input[type="checkbox"]:focus {
            outline: 2px solid #1e3268;
            outline-offset: 2px;
        }

        .form-widget-area input.form-control[type="text"],
        .form-widget-area input.form-control[type="email"] {
            width: 100%;
            border: none;
            border-bottom: 1px solid #3a4b7b;
            background-color: transparent;
            padding: 0.5rem 0;
            font-size: 1rem;
            color: #333;
            border-radius: 0;
            outline: none;
            transition: border-color 0.3s ease;
        }

            .form-widget-area input.form-control[type="text"]::placeholder,
            .form-widget-area input.form-control[type="email"]::placeholder {
                color: #999;
                font-style: italic;
            }

            .form-widget-area input.form-control[type="text"]:focus,
            .form-widget-area input.form-control[type="email"]:focus {
                border-bottom-color: #1e3268;
                box-shadow: none;
            }

        .form-widget-area textarea.form-control {
            width: 100%;
            border: 1px solid #3a4b7b;
            background-color: transparent;
            padding: 0.75rem;
            font-size: 1rem;
            color: #333;
            border-radius: 4px;
            outline: none;
            min-height: 120px;
            resize: vertical;
            transition: border-color 0.3s ease;
        }

            .form-widget-area textarea.form-control::placeholder {
                color: #999;
                font-style: italic;
            }

            .form-widget-area textarea.form-control:focus {
                border-color: #1e3268;
                box-shadow: none;
            }

        /* Submit Button Styling */
        .form-widget-area input[type="submit"] {
            background-color: #FFD255;
            color: #1e3268;
            border: 1px solid #FFD255;
            padding: 0.75rem 2.5rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

            .form-widget-area input[type="submit"]:hover {
                background-color: #ffffff;
                border: 1px solid #FFD255;
            }

            .form-widget-area input[type="submit"]:active {
                transform: translateY(0);
            }

    .field-validation-error {
        color: red;
    }
    /* Responsive adjustments for form widget area */
    @media (max-width: 768px) {
        .form-page-content-wrapper, .generic-page-content-wrapper, .sub-page-content-wrapper {
            max-width: 100%;
        }

        .form-widget-area {
            max-width: 100%;
            padding: 1.5rem 1.5rem 1.5rem 0;
        }

        .form-control-lg {
            font-size: 0.875rem !important;
        }
    }

    /* ============================================================================
   YouTube Video Embed Styles (Frontend)
   ============================================================================ */

    /* YouTube video embed container */
    .youtube-video-embed {
        margin: 20px 0;
        /*    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;*/
    }

    /* Video container with responsive aspect ratio */
    .youtube-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background-color: #000;
        border-radius: 4px;
    }

        .youtube-video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

    /* YouTube controls section */
    .youtube-controls {
        margin-top: 15px;
        text-align: left;
    }

    /* Transcript toggle button */
    .youtube-transcript-toggle {
        display: inline-block;
        padding: 10px 20px;
        background-color: #ff0000;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .youtube-transcript-toggle:hover {
            background-color: #cc0000;
        }

        .youtube-transcript-toggle:active {
            background-color: #990000;
        }

    /* Transcript content */
    .youtube-transcript {
        margin-top: 15px;
        padding: 15px;
        background-color: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 400px;
        overflow-y: auto;
    }

        /* Scrollbar styling for transcript */
        .youtube-transcript::-webkit-scrollbar {
            width: 8px;
        }

        .youtube-transcript::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .youtube-transcript::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

            .youtube-transcript::-webkit-scrollbar-thumb:hover {
                background: #555;
            }

    /* Mobile responsive */
    @media (max-width: 768px) {
        .youtube-video-embed {
            padding: 10px;
            margin: 15px 0;
        }

        .youtube-transcript {
            max-height: 300px;
            font-size: 13px;
        }

        .youtube-transcript-toggle {
            width: 100%;
            padding: 12px;
        }
    }

    /* Print styling */
    @media print {
        .youtube-controls {
            display: none;
        }

        .youtube-transcript {
            display: block !important;
            max-height: none;
            overflow: visible;
        }

        .youtube-video-container {
            page-break-inside: avoid;
        }
    }

    .c-button-alt {
        background-color: #1e3268;
        color: #ffffff;
        border: 1px solid #1e3268;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none !important;
        letter-spacing: -0.01em;
        transition: all 0.3s ease;
        font-size: .875rem;
        line-height: 1.42857;
        display: inline-block;
        padding: .8rem 2rem;
    }

        .c-button-alt:hover {
            background-color: #ffffff;
            color: #1e3268 !important;
            border: 1px solid #1e3268;
            text-decoration: none !important
        }

    /* Rich text editer styling */

    /*.fr-view {
    padding: 20px 0;
}*/

    /* Anchor styling */
    .anchor {
        color: #6B27CC;
        font-weight: 600;
    }

    li:has(a.anchor)::marker {
        content: '' !important;
    }


    ul:has(li > a.anchor) {
        padding-left: 0;
    }

    /* ============================================================================
   Two-Column Image & Text Layout
   ============================================================================ */

    /* Container for the two-column layout */
    .two-column-layout {
        display: flex;
        gap: 2rem;
        align-items: stretch;
    }

    /* Left column - Image and description */
    .two-column-layout-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Right column - Paragraphs */
    .two-column-layout-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Image styling - fixed 3:2 ratio, cropped with object-fit */
    .two-column-layout-image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 8px;
        object-fit: cover;
    }

    /* Description text below image */
    .two-column-layout-description {
        font-size: 0.75rem;
        color: #1e3268;
        line-height: 1.3;
    }

    /* Paragraph content */
    .two-column-layout-content {
        font-size: 1.125rem;
        color: #1e3268;
        line-height:1.44;
    }

    /* Mobile: Stack layout - paragraphs on top, image and description at bottom */
    @media (max-width: 768px) {
        .two-column-layout {
            flex-direction: column-reverse;
            gap: 1.5rem;
        }

        .two-column-layout-left,
        .two-column-layout-right {
            width: 100%;
        }
    }

   

    /* ============================================================================
   Statistics Section Styles
   ============================================================================ */

    /* Horizontal layout on desktop, 2x2 grid on mobile */
    .stats-section-inline {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        background: #dcbdff;
    }

    .stat-item-inline {
        text-align: center;
        padding: 0 20px;
        border-left: 1px solid #bfa8e9;
    }



        /* Remove right border from last item */
        .stat-item-inline:last-child {
            border-right: none;
        }

        .stat-item-inline .stat-number {
            display: inline;
            font-size: 2.5rem;
            font-weight: 600;
            margin-right: 10px;
        }

        .stat-item-inline .stat-label {
            display: inline;
            font-size: 1rem;
            font-weight: 500;
        }

    /* Mobile view - 2x2 grid layout */
    @media (max-width: 768px) {
        .stats-section-inline {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            padding: 0;
        }

        .stat-item-inline {
            padding: 10px;
            border: 1px solid #bfa8e9;
            border-right: none;
            border-bottom: none;
            text-align: left;
        }





            .stat-item-inline .stat-number {
                display: block;
                margin-bottom: 5px;
                margin-right: 0;
                font-size: 1.6rem;
            }

            .stat-item-inline .stat-label {
                display: block;
                font-size: 0.8rem;
            }
    }

    /* ============================================================================
   Text-Image Split Component (rich text editor friendly)
   ============================================================================ */

    .text-image-split {
        display: flex;
        align-items: flex-start;
        gap: 129px;
        margin-bottom: 40px;
    }

        .text-image-split h3 {
            margin-top: 0 !important;
        }

        .text-image-split .text-image-split-text {
            width: 630px;
            max-width: 100%;
            flex-shrink: 0;
            font-size: 1.125rem;
            line-height: 1.4;
        }


        .text-image-split .text-image-split-media {
            flex: 1;
            min-width: 0;
        }

            .text-image-split .text-image-split-media img {
                width: 100%;
                height: auto;
                aspect-ratio: 521 / 300;
                object-fit: cover;
                border-radius: 12px;
                display: block;
            }

    #campers-staff-content .text-image-split .text-image-split-media img {
        aspect-ratio: 413 / 400;
    }

@media (max-width: 767.98px) {
    .text-image-split {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

        .text-image-split .text-image-split-text {
            width: 100%;
            font-size: 0.875rem;
            line-height: 1.57;
        }

      

        .text-image-split .text-image-split-media {
            width: 100%;
        }

            .text-image-split .text-image-split-media img {
                aspect-ratio: 353 / 203;
                margin-bottom: 1rem;
            }

    #campers-staff-content .text-image-split .text-image-split-media img {
        aspect-ratio: 353 / 342;
    }

    .generic-page .resource-links-widget {
        padding: 20px !important;
    }
}

.generic-page .resource-links-widget {
    padding: 80px;
}