/*************************************************
 * GLOBAL 
 *************************************************/
    
    @font-face {
        font-family: 'Pretendard';
        src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
    }
    
     :root {
        --color-text: #231F20;
        --color-primary: #243E90;
        --color-primary-light: #CDD6EA;
        --color-gray: #6D6E71;
        --color-gray-light: #939598;
        --color-gray-lighter: #E6E7E8;
        --color-white: #fff;
        --color-black: #000;
    }
    
    html {
        word-break: keep-all;
    }
    
    body,
    body * {
        color: var(--color-text);
        font-family: "Pretendard", sans-serif;
    }
    
    a.btn {
        text-decoration: none;
    }
    
    .btn {
        border-radius: 0 !important;
        min-width: 0;
        min-height: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        transition: all 0.3s ease;
        flex-shrink: 0;
        cursor: pointer;
    }
    
    .btn-primary {
        background-color: #47A3CA !important;
        border-color: #47A3CA !important;
        color: var(--color-white) !important;
        border: 2px solid #47A3CA !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    
    .btn-primary i {
        color: var(--color-white) !important;
    }
    
    .btn-primary:hover {
        background-color: var(--color-white) !important;
        border-color: #47A3CA !important;
        color: #47A3CA !important;
    }
    
    .btn-primary:hover i {
        color: #47A3CA !important;
    }
    
    .btn-black {
        background-color: var(--color-black);
        color: var(--color-white);
        border: 2px solid var(--color-black);
    }
    
    .btn-black:hover {
        background-color: var(--color-white) !important;
        border-color: var(--color-black) !important;
        color: var(--color-black) !important;
    }
    
    .btn-secondary {
        background-color: var(--color-gray-lighter) !important;
        color: var(--color-black) !important;
        border-color: var(--color-gray-lighter) !important;
    }
    
    .btn-small {
        padding: 6px 24px;
        font-size: 16px;
    }
    
    .btn-secondary:hover {
        background-color: var(--color-gray-light) !important;
        border-color: var(--color-gray-light) !important;
        color: var(--color-black) !important;
    }
    
    .btn-back {
        margin-top: 40px;
    }
    
    input:not([type="submit"]) {
        border: 1px solid var(--color-gray-light);
        border-radius: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }
    /*************************************************
 * MENU WRAPPER & MEGA MENU 
 *************************************************/
    /* Container that wraps both menu rows */
    
    .menu-wrapper {
        position: relative;
        /* Allows sub-menu to be absolutely placed if needed */
    }
    /* First Row (4 main items, center-aligned) */
    
    .top-menu-row {
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        transition: background-color 0.3s;
        padding: 20px 0;
    }
    
    .top-menu-item {
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    #site-logo {
        width: 360px;
        max-width: 60vw;
        display: block;
    }
    
    .top-left-buttons {
        border: 1px solid var(--color-gray);
        border-radius: 0;
        padding: 0;
        align-items: stretch;
    }
    
    .btn-home {
        display: block;
        width: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--color-gray);
        margin: 0;
        height: 100%;
    }
    
    .btn-home:hover {
        background-color: rgba(var(--color-primary), 0.3);
    }
    
    .btn-home img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    
    .btn-donate {
        background-color: white;
        color: var(--color-text);
        font-weight: bold;
        font-size: 0.9rem;
    }
    
    .top-menu-item:hover {
        background-color: #f8f9fa;
    }
    
    .lang-flag {
        height: 26px;
        /* aspect-ratio: 3/2; */
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .lang-flag img {
        min-width: 100%;
        min-height: 105%;
        object-fit: cover;
    }
    /* Sub-menu (4 columns) */
    
    .sub-menu-row {
        position: absolute;
        top: 100%;
        /* Below the top menu */
        left: 0;
        right: 0;
        z-index: 999;
        display: none;
        /* Only show on hover or via JS */
        background-color: #fff;
        border-top: 1px solid #ddd;
    }
    
    .menu-wrapper:hover .sub-menu-row {
        display: block;
    }
    
    .sub-menu-col {
        border-right: 1px solid #eee;
        min-height: 180px;
        /* Optional consistent height */
    }
    
    .sub-menu-col:last-child {
        border-right: none;
    }
    
    .sub-menu-title {
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    
    .sub-menu-row a {
        color: #000;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .sub-menu-row a:hover {
        color: #007bff;
        text-decoration: underline;
    }
    /*************************************************
 * MOBILE MENU BUTTON & OVERLAYS
 *************************************************/
    
    .menu-toggle {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 20px;
        z-index: 1001;
        display: none;
        /* Hidden on desktop */
    }
    /* Make menu full screen on mobile */
    
    @media (max-width: 767px) {
        .menu-wrapper {
            position: fixed;
            top: 0;
            /* Start 200px off-screen */
            left: -200px;
            /* Increase width by 200px so menu is fully shown when at left: 0 */
            width: calc(100% + 200px);
            height: 100vh;
            background-color: #fff;
            box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
            transition: left 0.3s ease-in-out;
            z-index: 1000;
            overflow-y: auto;
            padding: 20px;
        }
        /* When toggled active, slide to 0 so entire menu is on-screen */
        .menu-wrapper.active {
            left: 0;
        }
        .top-menu-row {
            display: flex;
            flex-direction: column;
        }
        .top-menu-item {
            width: 100%;
            padding: 10px 0;
            text-align: left;
            cursor: pointer;
        }
        /* Make sub-menu static and hidden by default */
        .sub-menu-row {
            display: none;
            position: static;
        }
        .sub-menu-col {
            display: none;
            padding-left: 15px;
        }
        /* Example of toggling sub-menus by adding an "active" class to .top-menu-item */
        .top-menu-item.active+.sub-menu-col {
            display: block;
        }
    }
    /* Example: Style headings within the dropdown */
    
    .dropdown-menu.mega-menu h6 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    /* Submenu item spacing */
    
    .dropdown-menu.mega-menu .dropdown-item {
        padding: 0.25rem 0;
    }
    
    .dropdown-item:hover {
        width: 100%;
        min-width: 400px;
    }
    /* Optional: Add min-width so it looks more “mega” */
    
    .dropdown-menu.mega-menu {
        min-width: 600px;
        border: 1px solid #ddd;
    }
    
    @media (max-width: 767px) {
        /* Or 768px, depending on your breakpoint */
        .dropdown-menu.mega-menu {
            position: static !important;
            /* removes absolute positioning */
            width: 100% !important;
            /* ensures full mobile width */
            min-width: auto !important;
            /* override if you had a fixed min-width */
            left: 0 !important;
            right: 0 !important;
            border-radius: 0;
            /* optional: remove rounded corners on mobile */
        }
    }
    
    .dropdown-menu {
        border-radius: 0 !important;
    }
    /*************************************************
 * DESKTOP vs. MOBILE OVERRIDES
 *************************************************/
    /* Desktop: Keep absolute-position + hover logic. */
    /* Mobile: Override and let toggler do show/hide. */
    /* Original style: hide sub-menu unless hover (Desktop) */
    
    .sub-menu-row {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        display: none;
        background-color: #fff;
        border-top: 1px solid #ddd;
    }
    /* Show on hover (Desktop only) */
    
    .menu-wrapper:hover .sub-menu-row {
        display: block;
    }
    /* Override for mobile (<768px): position static, no hover needed */
    
    @media (max-width: 767px) {
        .sub-menu-row {
            position: static;
            display: block;
            border-top: 1px solid #ddd;
            /* margin-top: 0.5rem;  (Uncomment if you want extra spacing) */
        }
        .menu-wrapper:hover .sub-menu-row {
            /* On mobile, ignore hover logic—collapse toggler handles visibility */
            display: block;
        }
    }
    /*************************************************
 * HISTORY / VISION SECTIONS
 *************************************************/
    
    .history-vision {
        padding: 50px 20px;
    }
    
    .history-vision .quote {
        font-size: 3.6rem;
        font-weight: bold;
        color: var(--color-primary);
        font-family: 'Nanum Brush Script', cursive;
    }
    
    .history-vision .description {
        font-size: 1.3rem !important;
        line-height: 1.5;
        color: var(--color-text);
        font-weight: 700;
        margin: 10px auto;
        /* font-family: 'Noto Sans KR', sans-serif; */
    }
    /*************************************************
 * LINE BREAK (Desktop vs. Mobile)
 *************************************************/
    
    @media (min-width: 768px) {
        .line-break {
            display: block;
        }
    }
    
    @media (max-width: 767px) {
        .line-break {
            display: inline;
        }
    }
    /*************************************************
 * WHAT-WE-DO SECTION
 *************************************************/
    
    .what-we-do {
        background-color: #f5f5f5;
        padding: 50px 20px;
    }
    
    .what-we-do .container {
        max-width: 991px;
    }
    
    .what-we-do__item {
        flex-shrink: 0;
    }
    /* Reuse .section-title below in photo-news as well */
    
    .section-title {
        font-size: 2.4rem;
        font-weight: 600;
        margin-bottom: 30px;
    }
    
    .what-we-do .icon {
        margin-right: 15px;
        width: 4.6rem;
        height: auto;
        transition: fill 0.3s;
    }
    
    .what-we-do__item svg path {
        transition: fill 0.3s;
    }
    
    .what-we-do__item:hover svg path:not(.no-change) {
        fill: var(--color-primary);
    }
    
    .what-we-do__item:hover svg path.light-blue {
        fill: #9AAED6;
    }
    
    .what-we-do .icon.search-people {
        width: 4.8rem;
    }
    
    @media (max-width: 768px) {
        .what-we-do .icon {
            width: 3.3rem !important;
        }
    }
    
    .what-we-do .title {
        font-size: 1.3rem;
        font-weight: bold;
        text-align: left;
    }
    /* Overridden .description inside what-we-do (lighter color) */
    
    .what-we-do .description {
        font-size: 1.1rem;
        margin: 0;
        text-align: left;
    }
    /*************************************************
 * RESPONSIVE: Stack vertically on mobile
 *************************************************/
    
    @media (max-width: 767px) {
        .row {
            flex-direction: column;
            /* text-align: center; */
        }
        .icon {
            margin: 0 auto 10px auto;
        }
    }
    /*************************************************
 * PHOTO NEWS
 *************************************************/
    
    .photo-news {
        background-color: #ffffff;
        padding: 50px 20px;
    }
    
    .carousel-inner img {
        width: 250px;
        height: auto;
        /* border-radius: 10px; */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .caption {
        font-size: 1rem;
        color: #333;
        margin-top: 10px;
        font-weight: 500;
    }
    /*************************************************
 * BUTTONS & PARTNER LOGOS
 *************************************************/
    
    .btn-primary {
        background-color: #00205C;
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        border-radius: 30px;
    }
    
    .partner-logos {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    
    .partner-logos a:nth-child(3) {
        height: 32px;
    }
    
    .partner-logos img {
        height: 60px;
        width: auto;
        max-width: 100%;
        opacity: 0.8;
    }
    
    @media (max-width: 767px) {
        .partner-logos {
            flex-wrap: wrap;
        }
    }
    /*************************************************
 * SUB-FOOTER (Gray Background)
 *************************************************/
    
    .sub-footer {
        background-color: #555;
        /* Gray background */
        color: #fff;
        padding: 30px 20px;
    }
    
    .sub-footer h5 {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .sub-footer p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 8px;
    }
    
    .sub-footer a {
        color: #fff;
        text-decoration: none;
    }
    
    .sub-footer a:hover {
        text-decoration: underline;
    }
    
    .btn-outline-light {
        border-color: #fff;
        color: #fff;
        padding: 8px 15px;
        font-size: 0.9rem;
        margin-top: 10px;
    }
    
    .btn-outline-light:hover {
        background-color: #fff;
        color: #555;
    }
    
    @media (max-width: 767px) {
        .sub-footer .col-md-4 {
            padding-bottom: 30px;
        }
    }
    /*************************************************
 * FOOTER (Black Background)
 *************************************************/
    
    footer .copyright {
        background-color: #222;
        color: #bbb;
        padding: 15px 0;
        font-size: 0.9rem;
    }
    
    .text-left {
        text-align: left;
    }
    /*************************************************
 * HERO SECTION 
 *************************************************/
    
    .hero-section {
        background: url('../Content/banner-2.jpg') no-repeat center center;
        background-size: cover;
        text-align: center;
        color: #000;
        position: relative;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-section.about-hero {
        background: url('../Content/banner-about.jpg') no-repeat center bottom;
        background-size: cover;
    }
    
    .hero-section.hero-press {
        background: url('../content/banner-press.jpg') no-repeat center center;
        background-size: cover;
    }
    
    .hero-section.hero-events {
        background: url('../content/banner-events.jpg') no-repeat center center;
        background-size: cover;
    }
    
    .hero-section.about-hero:after,
    .hero-section.hero-press:after,
    .hero-section.hero-events:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        content: '';
    }
    
    .hero-section>div {
        position: relative;
        z-index: 2;
    }
    
    .hero-title {
        font-size: 2.6rem;
        font-weight: bold;
    }
    
    .hero-section.about-hero .hero-title,
    .hero-section.hero-press .hero-title,
    .hero-section.hero-events .hero-title,
    .hero-section .hero-title {
        color: var(--color-white);
        font-size: 2.6rem;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .sub-title {
        font-size: 1.2rem;
        margin-top: 5px;
        font-weight: 700;
    }
    
    .hero-section.about-hero .sub-title {
        color: var(--color-black);
    }
    
    .hero-section.hero-press .sub-title {
        color: var(--color-white);
    }
    /*************************************************
 * NAVIGATION TABS
 *************************************************/
    
    .nav-tabs-container {
        position: relative;
        /* For z-index */
        z-index: 9999;
        /* Above other elements */
        background-color: #f8f9fa;
        width: 60%;
        /* Adjust to fit between sections */
        margin: -43px auto 0 auto;
        /* Moves nav-tabs halfway between hero & content */
        padding: 10px 15px;
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .nav-pills .nav-link {
        color: #333;
        font-weight: 600;
        border-radius: 0;
        padding: 10px 20px;
    }
    
    .nav-pills .nav-link.active {
        background-color: #00205C;
        color: #fff;
    }
    /*************************************************
 * CONTENT SECTION 
 *************************************************/
    
    .content-section {
        padding: 60px 0;
    }
    
    .content-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .content-text {
        font-size: 1rem;
        line-height: 1.8;
        color: #333;
    }
    /* Responsive Design for nav-tabs-container */
    
    @media (max-width: 768px) {
        .nav-tabs-container {
            width: 90%;
            /* Full width on smaller screens */
        }
    }
    /*************************************************
 * Additional Styling: SK 
 *************************************************/
    
    @media (min-width: 1400px) {
        .container,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl,
        .container-xxl {
            max-width: 1024px;
        }
    }
    
    .btn {
        padding: 6x 16px;
        border-radius: 0;
        border-width: 1px;
        border-style: solid;
        font-size: 0.9rem;
    }
    
    .btn-outline-white {
        border-color: var(--color-white);
        color: var(--color-white);
    }
    
    .btn-rounded {
        border-radius: 50px;
    }
    
    .btn-primary {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }
    
    .nav-item>.nav-link {
        color: var(--color-text);
        font-size: 1.2rem;
        font-weight: 600;
    }
    
    .nav-item>.nav-link:after {
        display: none;
    }
    
    .btn-search {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-search img {
        width: 24px;
        height: 24px;
    }
    
    .nav-item.dropdown>.dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.9);
        border-top: 5px solid transparent;
        top: 106%;
    }
    
    .nav-item.dropdown>.dropdown-menu .row ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* INTRO SECTION */
    
    #intro {
        max-width: 1024px;
    }
    
    #heroCarousel {
        height: 100%;
    }
    
    #heroCarousel .carousel-inner {
        height: 100%;
    }
    
    #heroCarousel .carousel-item {
        height: 100%;
    }
    
    #heroCarousel .carousel-item img {
        height: 100%;
        object-fit: cover;
        min-height: 300px;
    }
    
    .carousel-caption {
        background: rgba(0, 0, 0, 0.6);
        width: 100%;
        bottom: 0;
        left: 0;
        padding: 4px 24px;
        text-align: left;
    }
    
    .carousel-caption {
        font-weight: 300;
        font-size: 0.9rem;
    }
    
    .carousel-control-prev {
        padding-right: 40px;
    }
    
    .carousel-control-next {
        padding-left: 40px;
    }
    
    .intro-right {
        position: relative;
    }
    
    .intro-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }
    
    .intro-right-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        z-index: 2;
        padding-top: 20px;
    }
    
    .intro-right-text h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-white);
    }
    
    .intro-right-text a {
        font-weight: 300;
    }
    /* PHOTO NEWS */
    
    .photo-news-swiper {
        padding-bottom: 24px;
        position: relative;
    }
    
    .photo-news-swiper .swiper-slide {
        margin-right: 0 !important;
        overflow: visible;
        margin-top: 20px;
    }
    
    .photo-news-item-inner {
        border: 1px solid var(--color-gray-light);
        padding: 12px;
        border-radius: 0;
    }
    
    .photo-news__img-inner {
        position: relative;
        aspect-ratio: 3/2;
        /* width: 100%; */
        overflow: hidden;
        margin-bottom: 12px;
    }
    
    .photo-news-item p {
        margin: 0;
    }
    
    .photo-news-item img {
        aspect-ratio: 3/2;
        object-fit: cover;
        height: 100%;
        min-width: 100%;
        margin-bottom: 16px;
        transition: all 0.5s ease;
    }
    
    .photo-news-item:hover .photo-news__img-inner img {
        transform: scale(1.05);
    }
    
    @media (min-width: 769px) {
        .photo-news-swiper .swiper-slide:not(.swiper-slide-next) {
            padding: 20px 32px 48px 32px;
        }
        .swiper-slide.swiper-slide-next .photo-news-item-inner {
            transform: scale(1.02);
        }
    }
    
    .swiper-slide {
        padding: 10px;
    }
    
    .swiper-button-wrapper {
        position: relative;
        /* bottom:     0; */
        height: 32px;
        top: unset;
        display: flex;
        justify-content: center;
        gap: 80px;
        overflow: visible;
        width: 100%;
        z-index: 3;
    }
    
    .swiper-button-wrapper::before {
        position: absolute;
        /*content: '';*/
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 1.5px;
        background-color: var(--color-gray-light);
        z-index: 1;
    }
    
    .photo-news-nav .swiper-button-next:after,
    .photo-news-nav .swiper-button-prev:after {
        display: none;
    }
    
    .photo-news-nav .swiper-button-next,
    .photo-news-nav .swiper-button-prev {
        right: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        width: 40px;
        height: 40px;
    }
    
    .photo-news-nav img {
        height: 40px;
        width: 40px;
        flex-shrink: 0;
    }
    
    .photo-news-btn {
        font-size: 1.2rem;
        padding: 10px 40px;
    }
    
    .partner-logos {
        width: 100%;
        border-top: 1px solid var(--color-gray-light);
        display: flex;
        align-items: center;
    }
    
    .partner-logos a {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .partner-logos-inner img {
        height: 44px;
        width: auto;
    }
    
    .partner-logos-inner img.smaller {
        height: 27px;
    }
    
    @media (max-width: 768px) {
        .partner-logos-inner img {
            height: 28px;
        }
        .partner-logos-inner img.smaller {
            height: 18px;
        }
    }
    /* Footer */
    
    footer,
    footer * {
        color: var(--color-white);
    }
    
    .footer-inner-item {
        display: flex;
    }
    
    footer .copyright {
        background-color: #231F20;
    }
    
    .navbar>.container>.navbar-collapse>.navbar-nav {
        position: relative;
    }
    
    .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item {
        position: static;
    }
    
    .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        transform: none;
        padding: 0 !important;
        border: none !important;
    }
    
    .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row {
        margin: 0 !important;
        border: none;
    }
    
    .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div ul li a {
        transition: all 0.3s ease;
    }
    
    .nav-item.dropdown {
        width: 100%;
        text-align: center;
    }
    
    @media (min-width: 992px) {
        .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div {
            border-top: 6px solid transparent;
        }
        .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div.active {
            border-top: 6px solid var(--color-primary);
            /* padding: 0 !important; */
        }
        .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div:not(:last-child) {
            border-right: 1px solid var(--color-gray-light);
        }
        .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div ul li a:hover,
        .navbar>.container>.navbar-collapse>.navbar-nav>.nav-item>.mega-dropdown-menu>.row>div ul li a:active {
            text-decoration: underline;
            color: var(--color-primary);
            width: auto;
            min-width: unset;
            background-color: transparent;
        }
    }
    
    .navbar-toggler {
        border-radius: 0;
        border: none !important;
        outline: none !important;
    }
    
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none !important;
        border: none !important;
        background-color: transparent !important;
    }
    /* SUBPAGES HERO */
    
    .hero-section {
        /*background: url('/content/upload/blog/program-banner_1.png') no-repeat center center;*/
        background-size: cover;
        text-align: center;
        color: #000;
        position: relative;
        min-height: 340px;
        padding: 20px 16px 20px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-section:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.08);
        z-index: 1;
    }
    
    .hero-content {
        position: relative;
        z-index: 2;
    }
    
    .hero-overlay {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding: 30px;
    }
    
    .hero-title {
        font-size: 2rem;
        font-weight: bold;
    }
    
    .sub-title {
        font-size: 1.5rem;
        color: #fff;
        padding-top: 40px;
        position: relative;
    }
    
    .sub-title:after {
        width: 5rem;
        height: 4px;
        background: #fff;
        content: '';
        display: block;
        margin: 1rem 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    /* Navigation Tabs */
    
    .nav-tabs-container {
        position: relative;
        /* Required for z-index to work */
        z-index: 9999;
        /* Ensure it's above other elements */
        /* Adjust width to fit between sections */
        padding: 0;
        /* border-radius: 8px; */
        /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */
        border-radius: 0;
        transform: translateY(-50%);
        box-shadow: none;
        background-color: transparent !important;
        margin: 0 auto;
        width: 100%;
    }
    
    .nav-tabs-container>div {
        display: flex;
        justify-content: center;
    }
    
    .nav-tabs-container .nav-tabs {
        display: flex;
        justify-content: center;
        padding: 0;
        list-style: none;
        row-gap: 1px;
        column-gap: 1px;
        border: none;
        background-color: #fff !important;
        width: auto !important;
        flex-wrap: wrap;
        max-width: calc(100% - 1rem);
        margin: 0 auto;
    }
    
    .nav-tabs-container ul li {
        border-radius: 0;
        flex-shrink: 0;
        flex-grow: 0;
        width: auto !important;
        border: none;
        align-items: stretch;
    }
    
    .nav-tabs-container .nav-link {
        color: #333;
        font-weight: bold;
        border-radius: 0;
        padding: 6px 2rem;
        min-width: 10rem;
        border: none;
        background-color: var(--color-primary-light);
        text-align: center;
        transition: opacity 0.3s ease;
    }
    
    .nav-tabs-container .nav-link:hover {
        opacity: 0.8;
    }
    
    .nav-tabs-container .nav-link.active {
        background-color: #00205C;
        color: #fff;
    }
    
    @media (max-width: 575px) {
        .nav-tabs-container {
            transform: none;
            margin-top: 1rem;
        }
        .nav-tabs-container ul {
            flex-direction: column;
            align-items: stretch;
        }
    }
    
    .bread-crumb {
        padding: 3rem 0 2.4rem 0;
        border-bottom: 1px solid var(--color-gray-light);
    }
    
    .bread-crumb-text {
        color: #333;
        gap: 0.6rem;
        font-weight: 600;
    }
    
    .bread-crumb-text i {
        font-size: 0.8rem;
    }
    
    .bread-crumb-text a {
        color: var(--color-primary);
        text-decoration: none;
    }
    
    .content-block.width-small {
        max-width: 700px;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .history-tab {
        width: 100%;
    }
    
    .history-tab .nav-tabs {
        width: 100%;
    }
    
    .history-tab .nav-tabs .nav-link {
        width: 100%;
    }
    /* Content Box */
    
    .content-box {
        /* background-color: #f8f9fa; */
        padding: 2rem 3rem;
        margin-bottom: 30px;
        border: 1px solid var(--color-gray-light);
    }
    
    @media (max-width: 768px) {
        .content-box {
            padding: 1rem 0.8rem;
        }
        .content-box .content-block {
            padding: 0;
        }
    }
    
    .content-box.dark-bg {
        background-color: var(--color-gray-lighter);
        border: none;
    }
    /* Content Heading */
    
    .content-heading {
        font-size: 1.6rem;
        line-height: 1.4;
        font-weight: 700;
        color: var(--color-primary);
    }
    
    .content-heading-small {
        font-size: 1.1rem;
        font-weight: 700;
        padding: 0;
        margin: 0;
        margin-top: 1.5rem;
    }
    
    .sub-heading {
        margin-top: 1.4rem;
        margin-bottom: 4px;
        color: var(--color-primary);
        font-weight: 600;
        font-size: 1.2rem;
    }
    
    .content-items {
        list-style: none;
        padding-left: 0;
    }
    
    .content-items>div {
        margin-bottom: 1rem;
    }
    
    .content-list {
        padding-left: 2rem;
        list-style: none;
    }
    
    .content-list>li {
        position: relative;
    }
    
    .content-list>li:not(.none-dash):after {
        position: absolute;
        left: -12px;
        content: "-";
        top: 0;
    }
    
    .content-list>li.none-dash {
        margin-left: -12px;
    }
    /* HISTORY */
    
    .year-title {
        font-weight: 700;
        color: var(--color-primary);
        font-size: 1.4rem;
    }
    /* ARTICLE NAV */
    
    .article-nav-container {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-gray-light);
    }
    
    .article-nav-container .article-nav {
        padding: 12px 2rem;
        display: flex;
        gap: 2rem;
        align-items: center;
        border-bottom: 1px solid var(--color-gray-light);
    }