@charset "UTF-8";

@import url(common.css);
@import url(editor.css);

/*
 * Goal: For custom styling on a special contribution page, it is recommended to use both of the following selectors:
 *
 * 1. `.civicrm-contribute-sp`
 *    Although this selector is more intuitive and concise, it has two drawbacks due to its reliance on JavaScript:
 *    a. There is a gap period before this class is added.
 *    b. The selector may fail if JavaScript does not function properly.
 *
 * 2. `body:has(script[data-contribution-page-type="special"])`
 *    This selector is purely CSS-based, thus it does not have the drawbacks of `.civicrm-contribute-sp`.
 *    The `:has()` pseudo-class is supported by modern browsers. For compatibility, check https://caniuse.com/css-has.
 *
 * The reason for recommending the use of both selectors is to enhance user experience on modern browsers.
 *
 * Usage Example:
 * Hiding the main menu in the header of a special contribution page.
 *
 * CSS Code:
 *
 * .civicrm-contribute-sp .header .main-menu,
 * body:has(script[data-contribution-page-type="special"]) .header .main-menu {
 *   display: none;
 * }
 *
 */

/* *SECTION - Fixed */

.navbar-toggler-right {
    order: unset;
}

.slick-track::before,
.slick-track::after,
.row::before,
.row::after {
    content: unset;
}

.navbar-toggler-right {
    order: unset;
}

/* *ANCHOR - menu block in footer */
body[data-is-navbar-dropdown-hover="1"] {
    .site-footer {
        ul.navbar-nav {
            li.menu-item--expanded {
                ul.dropdown-menu {
                    display: block;
                }
            }

            .nb-dropdown-toggle {
                display: none;
            }
        }
    }
}

/* *ANCHOR - Slick */

.slick{
    .slick-dotted.slick-slider {
        margin-bottom: unset;
    }
    .slick__arrow {
        button {
            width: 44px;
            height: 44px;
            background: url(image/btn-next.svg) no-repeat 0 0;
            &::before{
                content: unset;
            }
        }
        .slick-prev {
            left: -68px;
            transform: scale(-1);
        }

        .slick-next {
            right: -68px;
        }
    }

    .slick-dots {
        margin: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: unset;
        @media (max-width: 992px) {
            /* transform: translateY(calc(-100% - 20px)); */
        }
        @media (min-width: 992px) {
            /* transform: translateY(calc(-100% - 20px)); */
            /* bottom: 22px; */
        }
        li{
            all: unset;
            button {
                padding: unset;
                width: 44px;
                height:44px;
                &::before{
                    all: unset;
                    content: '';
                    display: inline-block;
                    width: 44px;
                    height: 4px;                    
                    border-radius: 2px !important;
                    background-color: var(--color-text-200) !important;
                }
            }
            &.slick-active button::before{
                background-color: var(--color-main-300) !important;
            }
        }
    }
}

@media (min-width: 560px) {

    .path-frontpage .node .field--type-image,
    .node .field--type-image {
        float: unset;
        margin: unset;
    }
}

@media (max-width: 767px) {
    nav.menu--main {
        all: unset;
    }
}

@media (min-width: 1200px) {
    .node__content {
        font-size: 1rem;
    }

    body[data-is-navbar-dropdown-hover="1"] {
        .nb-dropdown-toggle {
            display: inline-block;
        }
    }
}

.clearfix {

    &::after,
    &::before {
        content: unset;
    }
}

.field--type-image img,
.field--name-field-user-picture img {
    margin: unset;
}

*:target {
    scroll-margin-top: var(--smt);
}

.nav-link {
    color: var(--color-text-700);
}

.node a,
.node p,
.node div {
    word-break: break-word;
}

.clear {
    clear: both;
}

/* *!SECTION */

/* *SECTION - Layout */

html {
    font-size: 16px;
}

body {
    color: var(--color-text-500);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

html,
body {
    overflow-x: clip;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: unset;
}

.desktop {
    display: none;
}

@media (min-width: 1200px) {
    .mobile {
        display: none;
    }

    .desktop,
    .mobile.active {
        display: block;
    }
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x:30px;
    @media (min-width: 1400px) {
        max-width: 1360px;
        padding-inline: unset;
    }
}

/* *ANCHOR - Header */

.header {
    width: 100%;
    background-color: white;
    border: unset;
    box-shadow: 0px 0px 12px 0px #00000026;

    @media (min-width:1201px) {
        .container {
            max-width: 1920px;
            padding-inline: 40px;
        }
    }

    .header-inner {
        padding-block: unset;

        .navbar {
            padding-block: clamp(0.938rem, calc(0.881rem + 0.24vw), 1.061rem); /* min: 15px, max: 16.98px */
            ;
        }
    }

    .navbar-brand {
        padding-block: unset;
        display: inline-flex;

        img {
            width: clamp(4.875rem, calc(4.023rem + 3.636vw), 6.75rem);
            /* min: 78px, max: 108px */
            ;
        }
    }

    /* *ANCHOR - Search */

    @media (min-width:1200px) {
        #block-search.active {
            position: absolute;
            right: 2rem;
            top: 70px;
            z-index: 1000;
        }
    }

    #search-block-form {
        margin-block: 1em;
        padding: 2px;
        border: 1px solid var(--color-text-300);
        border-radius: 40px;
        flex-wrap: nowrap;
        background-color: white;
        border-radius: 40px;
        &>* {
            margin: unset !important;
        }
        input.form-control {
            border: unset;
            border-radius: 40px;
            padding-left: 37px;
            background: url(image/icon-search-b.svg) no-repeat left 8px center;

            &:focus {
                box-shadow: unset;
            }
        }

        &:has(.form-control:focus) {
            box-shadow: 0 0 0 .25rem var(--color-main-100);
        }
    }
}

body.scrolled {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }

    &.toolbar-fixed {
        .header {
            top: var(--drupal-displace-offset-top);
        }
    }
}

/* *ANCHOR - Main */

body:not(.path-civicrm){
    .page {
        background-color: var(--color-bg);
        .main{
            padding-block: clamp(3.75rem, calc(2.557rem + 5.089vw), 5rem); /* min: 60px, max: 80px */;
            &:has(.node__content > .layout:first-child.full-width){
                padding-top: unset;
            }
            &:has(.node__content > .layout:last-child.full-width){
                padding-bottom: unset;
            }
        }
    }
}

/* *ANCHOR - Layout Builder */

.node__content{
    margin-top: unset;
    .layout{
        padding-block: 60px;
        &.full-width{
            padding-block: 80px;
        }
        &:has(.name-slider){
            padding-block: unset;
        }
        &.layout--tworow{
            .layout__region--row-first{
                margin-bottom: 80px;
            }
        }
    }
}


/* *ANCHOR - Layout Bg */

.layout.full-width{
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    @media (min-width: 768px){
        background-position: center top;
        background-size: cover;
    }
    &.bg-ourwork{
        padding-block: clamp(3.75rem, calc(2.557rem + 5.089vw), 5rem); /* min: 60px, max: 80px */;
        background-image: url(image/bg-ourwork-m.svg);
        @media (min-width: 768px){
            background-image: url(image/bg-node.svg);
            background-size: auto;
            background-position-x: left;
        }
        @media (min-width: 1600px){
            background-position-x: center;
        }
    }
    &.bg-impact{
        background-image: url(image/bg-impact.svg);
        background-size: cover;
    }
    &.bg-maps{
        background-image: url(image/bg-maps-1.svg);
        &#impact-map{
            background-image: url(image/bg-maps-gray.svg);
            background-position: right top;
        }
    }
    &.bg-color{
        background: linear-gradient(180deg, #FFFFFF 0%, #F2EFF1 100%);
    }
}

.path-donation{
    .layout-main-wrapper{
        background: url(image/bg-ourwork-m.svg) no-repeat 0 0 / 100%;
        @media (min-width: 768px){
                background: url(image/bg-ourwork-d.svg) no-repeat center top / contain;
        }
    }
}

/* *ANCHOR - Node twocol-section */

@media screen and (min-width: 40em) {

    .layout--twocol-section.layout--twocol-section--50-50>.layout__region--first,
    .layout--twocol-section.layout--twocol-section--50-50>.layout__region--second {
        flex: 0 1 100%;
    }
}

@media screen and (min-width: 992px) {

    .layout--twocol-section.layout--twocol-section--50-50>.layout__region--first,
    .layout--twocol-section.layout--twocol-section--50-50>.layout__region--second {
        flex: 0 1 50%;
    }
}

/* *ANCHOR - Footer */

.site-footer {
    background: var(--color-bg-footer);

    li.dropdown-item {
        & , a{
            color: white;
    
            &:hover {
                color: white;
                background-color: transparent;
            }
        }
    }

    .block {
        margin: unset;
        padding: unset;
        border: unset;

        .content {
            font-size: unset;
            color: white;
            margin: unset;
            padding: unset;
            border: unset;
        }
    }

    .region {
        width: unset;
        padding: unset;
        margin: unset;
    }

    .site-footer__top {
        display: grid;
        gap: 30px 60px;
        justify-content: space-between;
        @media (min-width: 992px) {
            grid-template-columns: auto 556px;
        }
        p{
            margin-top: unset;
        }
        .region {
            gap: 30px;
            &.region-footer-first {
                max-width: 633px;
                #block-fooeter-logo{
                    img{
                        margin-bottom: 39px;
                    }
                    .pink{
                        color: var(--color-main-100);
                    }
                }
            }
            &.region-footer-second{
                @media (min-width: 992px) {
                    row-gap: 60px;
                }
            }
        }

        ul.navbar-nav {
            font-size: 15px;
            display: flex;
            flex-direction: column;
            gap: 30px;
            li.dropdown {
                flex: 1;
                display: inline-block;
                & > .nav-link{
                    color: var(--color-main-100);
                }
                ul.dropdown-menu {
                    display: flex !important;
                    flex-wrap: wrap;
                    gap: 5px 10px;
                    min-width: unset;
                    background: unset;
                    margin-top: 5px;
                    border: unset;
                    li.dropdown-item {
                        width: 98px;
                        &.active{
                            background: unset;
                            font-weight: 900;
                        }
                    }
                }

                li.dropdown-item {
                    padding: unset;
                }
            }

            .nav-link {
                display: inline-block;
                color: white;
                width: auto !important;
                padding: unset;
            }
            span.nav-link {
                cursor: unset;
            }
            @media (min-width: 992px) {
                flex-direction: row;
                column-gap: 1rem;
                justify-content: flex-end;
                li.dropdown {
                    flex: 0 0 auto;
                    ul.dropdown-menu{
                        all: unset;
                        margin-top: 25px;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        gap: 15px;
                    }
                }
            }
        }

        .menu--social {
            ul.nav {
                gap: 8px;
                justify-content: center;

                @media (min-width: 992px) {
                    justify-content: end;
                }

                li {
                    a {
                        padding: unset;
                    }
                }
            }
        }
    }

    .site-footer__bottom {
        margin-top: 20px;
        padding-top: 20px;
        font-size: 14px;

        .region-footer-fifth {
            display: grid;
            grid-template-columns: auto;
            gap: 20px;
            justify-content: center;

            @media (min-width: 768px) {
                grid-template-columns: auto auto;
                justify-content: space-between;
            }

            ul {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px 30px;

                @media (min-width: 768px) {
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: end;
                }

                li {
                    list-style: none;
                }
            }
        }
    }
}

/* *!SECTION */

/* *SECTION - Menu */

/* *ANCHOR - Offcanvas fixed */

.modal-backdrop {
    z-index: 10;
}

.offcanvas {
    z-index: 11;

    .offcanvas-end {
        transform: unset;

        .btn-close {
            width: 2rem;
            height: 2rem;
        }
    }

    .offcanvas-body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    @media (min-width:1200px) {
        visibility: visible !important;
        position: unset;
        flex-direction: row;
        flex: 1;

        &.offcanvas-end {
            width: unset;
            transform: unset;
            border-left: unset;
        }

        .offcanvas-end {
            display: none;
        }

        .offcanvas-body {
            flex: 1;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            padding: unset;
            overflow: unset;
        }
    }
}

.nb-dropdown-toggle {
    width: 30px;
    height: 30px;
    background: url(image/icon-dropdown.svg) no-repeat 0 0 / 100%;
}

#CollapsingNavbar {
    gap: 20px;

    @media (max-width: 1200px) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link {
        font-size: 18px;
        color: var(--color-text-900);
        letter-spacing: 0.15em;
    }

    /* *ANCHOR - Main menu */
    .menu--main {
        margin-inline: auto;

        @media (max-width: 1200px) {
            width: 100%;
        }

        ul.navbar-nav {
            align-items: flex-start;
            gap: 20px;
            flex-wrap: nowrap;

            li.dropdown {
                @media (max-width: 1200px) {
                    justify-content: flex-start;
                    width: 100%;
                }
                @media (min-width: 1200px){
                    position: relative;
                    &::after{
                        content: '';
                        display: block;
                        width: 106%;
                        height: 9px;
                        border-bottom: 6px solid transparent;
                        position: absolute;
                        left: 50%;
                        bottom: -9px;
                        transform: translateX(-50%);
                    }
                    &.active{
                        &::after{
                            border-color: var(--color-main-500);
                        }
                    }
                }

                .dropdown-menu {
                    @media (max-width: 1200px) {
                        border: unset;
                        background-color: var(--color-text-500);
                        border-radius: unset;
                        padding-block: 1rem;
                        padding-left: 32px;
                        margin-left: -1rem;
                        flex: 0 0 120%;
                    }
                    @media (min-width: 1200px) {
                        margin-top: 8px;
                    }

                    li.dropdown-item {
                        @media (max-width: 1200px) {
                            padding: unset;
                            margin-bottom: 1rem;
                            &:last-child {
                                margin-bottom: unset;
                            }
                            &.active {
                                background-color: unset;
                            }
                            a{
                                color: var(--color-text-100);
                                &.active, &.is-active{
                                    color: var(--color-main-100);
                                }
                            }
                        }
                        @media (min-width: 1200px) {
                            &.active, &:active, &:hover, &:has(.is-active){
                                background-color: var(--color-main-100);
                                > a{
                                    color: var(--color-text-500);
                                }
                            }
                            
                        }
                    }
                }

                .nav-link {
                    display: inline-block;
                    padding: unset;
                }

                .nb-dropdown-toggle {
                    vertical-align: middle;
                }
            }
        }
    }

    /* *ANCHOR - Language menu */
    #block-language {
        .nav-link {
            padding: unset;
            position: relative;

            &.is-active {
                display: none;
            }

            &.en {
                &::before {
                    content: 'EN';
                }

                a {
                    font-size: 0;
                    color: transparent;
                    position: absolute;
                    inset: 0;
                }
            }
        }

    }

    /* *ANCHOR - Seconary menu */
    .menu--secondary {
        ul.nav {
            column-gap: 20px;
        }
    }

}

/* *ANCHOR - Social menu */

.menu--social {
    ul.nav {
        li {
            a {
                padding: unset;
                font-size: 0;
                color: transparent;
                display: block;
                width: 40px;height: 40px;
                background: url(image/btn-social-Facebook.svg) no-repeat 0 0;

                &.ig{ background-image: url(image/btn-social-Instagram.svg); }
                &.x{ background-image: url(image/btn-social-X.svg); }
                &.lk{ background-image: url(image/btn-social-LinkedIn.svg); }
                &.yt{ background-image: url(image/btn-social-Youtube.svg); }
            }
        }
    }
}

/* *!SECTION */

/* *SECTION - Entity & Element */

/* *ANCHOR - element container */

.views-field{
    &:has(.entity-more){
        container-type: inline-size;
        container-name: button-box;
    }
    &:has(.entity-number){
        container-type: inline-size;
        container-name: number-box;
    }
}

/* *ANCHOR - Element */

a:not(.btn){
color: var(--color-text-500);
    &:hover{
        text-decoration: none;
    }
}

.btn {
    padding: 9px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: unset;
    border-radius: 20px;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-main-500);
}

.btn-secondary{
    &.disabled, &:disabled {
        background-color: #6c757d !important;
    }
}

button.search,
a.button,
a.button.nav-link,
.entity-more a{
    display: inline-block;
    padding: 13.5px 40px;
    border: unset;
    border-radius: 50px;
    font-size: 15px;
    color: white !important;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    background: var(--color-main-500);
    white-space: nowrap;
    &.nav-link{
        font-size: 15px !important;
    }
    &.donate {
        font-size: 15px !important;
        background: linear-gradient(275.67deg, #841F66 -4.72%, #ED42BA 121.2%);
    }
}

.entity-more {
    a{
        font-size: 16px;
        font-weight: 400;
        padding-block: 16.5px;
        padding-inline: clamp(2.188rem, calc(1.761rem + 1.818vw), 3.125rem); /* min: 35px, max: 50px */;
        line-height: 1;
        letter-spacing: unset;
    }
    &.darker a {
        background: var(--color-main-700);
    }

    &.detail,
    &.regist{
        a{
            padding: 11px 30px 11px 11px;
            background: var(--color-main-500) url(image/icon-detial.svg) no-repeat right 5px center;
            @container button-box (min-width:182px){
                padding: 11px 68px 11px 48px;
                background: var(--color-main-500) url(image/icon-detial.svg) no-repeat right 35px center;
            }
        }
    }

    &.regist {
        &.lighter a {
            color: var(--color-text-700) !important;
            background-color: var(--color-main-100);
            background-image: url(image/icon-detial-darker.svg);
        }

        &.text-end {
            /* margin-right: -20px; */

            a {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
    }
}

button.search {
    letter-spacing: 0.05em;
    padding-inline: 44px 24px;
    background: var(--color-main-500) url(image/icon-search-w.svg) no-repeat left 18px center;
    &:hover {
        color: white;
    }
}

/* *ANCHOR - Entity */

.views-field-field-image,
.entity-img {
    img {
        width: 100%;
        border-top-right-radius: 30px;
    }

    &.round-corner-bl {
        img {
            border-bottom-left-radius: 30px;
        }
    }
    
    &.round-coner-reverse{
        img {
            border-radius: 30px 0 30px 0;
        }
    }
}

.round-corner-bl {
    border-bottom-left-radius: 30px;
}

.entity-date {
    color:var(--color-text-400);
    font-family: Roboto;
    font-size: 13px;
}

.trim{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.entity-title {
    &,
    a {
        color: var(--color-text-700);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.5;
    }

    &.break {
        @media (min-width: 40em) {
            white-space: normal;

            br {
                display: none;
            }
        }
    }
}

.entity-body {
    line-height: 1.5;
    &.trim{
        -webkit-line-clamp: 3;
    }
}

.views-field:not(.views-field-fieldset) {
    &:has(.entity-img)+*:not(.views-field-fieldset) {
        margin-top: 20px;
    }

    &:has(.entity-date)+&:has(.entity-title) {
        margin-top: 5px;
    }

    &+&:has(.entity-body), 
    &+&.views-field-body,
    &+&.views-field-summary {
        margin-top: 5px;
    }
}

.entity-number{
    color: var(--color-main-700);
    .number{
        font-family: Poppins;
        font-size: 40px;
        font-weight: 500;
        line-height: 1;
        @container number-box (max-width:150px){
            font-size: 30px;
        }
    }
    .unit{

    }
}

.entity-tag{
    ul.list-group{
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1em !important;
        li{
            a{
                color: white;
                background-color: var(--color-sub-500);
                font-size: 14px;
                font-weight: 500;
                display: inline-block;
                padding: 5px 15px;
                border-radius: 15px;
            }
        }
    }
}

.entity-share {
    display: flex;
    align-items: center;

    & .views-label {
        font-size: 15px;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    & .addtoany_list {
        a {
            background: transparent url(images/btn-fb.svg) no-repeat center center / contain;
            margin-left: 8px;
            padding: unset;

            span.a2a_svg {
                background-color: unset !important;

                svg {
                    display: none;
                }
            }

            &.a2a_button_line {
                background-image: url(images/btn-line.svg);
            }

            &.a2a_button_x {
                background-image: url(images/btn-x.svg);
            }

            &.a2a_button_copy_link {
                background-image: url(images/btn-link.svg);
            }
        }
    }
}

.entity-edit a {
    color: white !important;
    padding: 1px 1em;
    border-radius: 16px;
    border: 1px solid white;
    font-size: 0.9em;
    background-color: var(--color-text-700);
    display: inline-block;
    margin-top: 0.5em;
}

/* *ANCHOR - Decorative title */

.underline{
    text-decoration: underline;
    text-decoration-thickness: 10px;
    text-underline-offset: -2px;
    text-decoration-skip-ink: none;
    &.green{
        text-decoration-color: var(--color-sub-300);
    }
    &.pink{
        text-decoration-color: var(--color-main-100);
    }
}

/* *ANCHOR - Decorative link */

.entity-link,
.field--name-field-link{
    a{
        display: inline-block;
        padding: 20px 60px;
        color: white;
        background-color: var(--color-main-500);
        font-weight: 500;
        font-size: 24px;
        line-height: 1.4;
        position: relative;
        &::before, &::after{
            content: '';
            display: block;
            width: 40px;height: 8px;
            border-radius: 8px;
            background-color: var(--color-main-700);
            transform: rotate(-45deg);
            position: absolute;
        }
        &::before{
            top: 5px;
            left: -10px;
        }
        &::after{
            bottom: 5px;
            right: -10px;
            background-color: var(--color-main-300);
        }
    }
}

.entity-link{
    margin-top: 100px;
}

/* *ANCHOR - Color scheme */

.pink {
    .entity-title {
        color: var(--color-main-700);
    }

    .entity-more a {
        background: linear-gradient(275.67deg, #841F66 -4.72%, #ED42BA 121.2%);
    }
}

.green {
    .entity-title {
        color: var(--color-sub-500);
    }

    .entity-more a {
        background: linear-gradient(275.67deg, #7A9B50 -4.72%, #C9E0A4 121.2%);
    }
}

/* *ANCHOR - Item List */

.item-list{
    ul.list-group{
        all: unset;
        display: grid;
        li.list-group-item{
            all: unset;
        }
    }
}

/* *ANCHOR - Entity List */

.entity-list {
    ul.d-grid {
        row-gap: 40px;
        column-gap: 20px;
        justify-content: center;
        @media (min-width:768px) {
            grid-template-columns: repeat(3, 1fr);
            justify-content: space-between;
        }
        @media (min-width:1200px) {
            column-gap: 60px;
        }
    }
    
    &.column-2 {
        ul.d-grid {
            column-gap: 60px;
            grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
        }
    }

    &.column-6 {
        ul.d-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
            gap: 40px;
            @media (min-width:768px) {
                grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
            }
        }
    }

    &.alternating{
        ul.d-grid{
            grid-template-columns: 1fr;
            gap: 60px;
            @media (min-width:768px) {
                li.d-grid{
                    grid-template-columns: 44% 1fr;
                    gap: 60px;
                    align-items: center;
                    &:nth-child(2n){
                        grid-template-columns: 1fr 44%;
                        text-align: right;
                        .views-field:first-child{
                            order: 2;
                        }
                    }
                }
                
            }
            .entity-title{
                font-size: 48px;
            }
            .entity-subtitle{
                color: var(--color-main-300);
                font-family: Poppins;
                font-size: var(--fs-h4);
                letter-spacing: 0.05em;
                margin-block: -10px 40px;
            }
            .entity-more{
                margin-top: 30px;
            }
        }
    }
}

/* *ANCHOR - Card */

.card {
    border-radius: 0 30px 0 30px;
    box-shadow: 4px 4px 8px 0px #0000001A;
    border: unset;

    .card-text {
        padding: 20px;
    }
}

/* *ANCHOR - Title */

h1.title{
    margin-block: 1em;
}

/* *ANCHOR - Block */

.block {
    h2.block-title,
    .field--name-field-subtitle {
        color: var(--color-main-700);
        font-family: Roboto;
        font-size: var(--fs-h3);
        font-weight: 700;
        line-height: 1;
        text-align: center;
        margin-top: 0;
        margin-bottom: clamp(2.5rem, calc(1.307rem + 5.089vw), 3.75rem);
        /* min: 40px, max: 60px */
        &.sub{
            color: var(--color-text-700);
            font-size: var(--fs-h3);
            margin-bottom: 30px;
            &.underline{
                font-size: var(--fs-h5);
                text-align: left;
            }
        }
        &::before {
            display: block;
            font-family: Poppins;
            font-size: clamp(3.25rem, calc(2.057rem + 5.089vw), 4.5rem);
            /* min: 52px, max: 72px */
            font-weight: 275;
            line-height: 1.5;
            color: var(--color-main-300); 
            margin-bottom: 2px;
        }
        @media (max-width: 512px) {
            &::before {
                line-height: 1;
                margin-bottom: 15px;
            }
        }
    }
    &.block-content-text_content{
        .block-inner{
            .content{
                font-size: 18px;
            }
        }
    }
}

/* *ANCHOR - Block Title */

#project h2.block-title,
.work-title .field--name-field-subtitle {
    text-align: left;
    margin-bottom: 30px;
}

#project,
#impact-taiwan,
.work-title{
    h2.block-title:not(.sub)::before,
    .field--name-field-subtitle::before {
        content: "Our Work";
    }
}

#impact,
.impact {
    h2.block-title::before {
        content: "Impact factor";
    }
}

#work-story {
    h2.block-title::before {
        content: "Impact story";
    }
}

#news h2.block-title::before {
    content: "News";
}

#event h2.block-title::before {
    content: "Join the Event";
}

.careers h2.block-title::before {
    content: "Careers";
}

.volunteer h2.block-title::before {
    content: "Volunteer";
}

.partnerships h2.block-title::before {
    content: "Partnerships";
}

.about h2.block-title::before {
    content: "About us";
}

#project{
    .block-content-text_content {
        margin-bottom: clamp(2.5rem, calc(1.307rem + 5.089vw), 3.75rem);
        /* min: 40px, max: 60px */
        .block-inner {
            @media (min-width: 992px) {
                display: flex;
                justify-content: space-between;
            }
            .content {
                font-size: 18px;
                flex: 0 0 50%;
                @media (min-width: 992px) {
                    &::before {
                        content: '';
                        display: block;
                        height: 107px;
                    }
                }
            }
        }
    }
}

.work-title{
    margin-bottom: clamp(2.5rem, calc(1.307rem + 5.089vw), 3.75rem);
    /* min: 40px, max: 60px */
    @media (min-width: 992px) {
        display: flex;
        justify-content: space-between;
    }
    .block-field-blocknodeprojectbody {
        font-size: 18px;
        flex: 0 0 50%;
        @media (min-width: 992px) {
            &::before {
                content: '';
                display: block;
                height: 107px;
            }
        }
    }
}

/* *ANCHOR - Pager */

ul.pagination {
    margin-top: 60px;
    align-items: center;
    gap: 10px;
    li.page-item {
        .page-link {
            color: var(--color-text-500);
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 28px;height: 28px;
            background-color: var(--color-text-100);
            border: unset;
            border-radius: 50%;
        }

        &.active {
            & .page-link {
                width: 28px;
                background-color: var(--color-main-500);
                color: white;
            }
        }

        a {
            &:not([title=""]) {
                font-size: 0;
                color: transparent;
                display: block;
                width: 28px;height: 28px;
                background: var(--color-text-100) url(image/icon-pager-last.svg) no-repeat center center;
            }

            &[title="移至第一頁"] {
                transform: scaleX(-1);
            }

            &[title^="到"] {
                background-image: url(image/icon-pager-next.svg);
            }

            &[title="到上一頁"] {
                transform: scaleX(-1);
            }
        }

    }
}

/* *ANCHOR - Accordion */

.ui-accordion{
    max-width: 860px;
    margin-inline: auto;
    .item > .item{
        border: 1px solid var(--color-text-300);
        box-shadow: 0 0 8px 2px #0000001A;
        .ui-accordion-header{
            border: unset;
            background-color: white;
            padding: 20px 20px 20px 40px;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            a{
                font-weight: 700;
                font-size: var(--fs-h4);
            }
            .ui-icon{
                order: 2;
                width: 44px;height: 44px;
                background: url(image/btn_more.svg) no-repeat 0 0;
                transform: scale(-1);
            }
            &.ui-accordion-header-active{
                a{
                    color: var(--color-main-500);
                }
                .ui-icon{
                    transform: unset;
                }
            }
        }
        .ui-accordion-content-active{
            padding: 20px 20px 20px 40px;
            border: unset;
        }
    }
}

/* *ANCHOR - Views */

.more-link {
    margin-top: clamp(2.5rem, calc(-0.601rem + 13.232vw), 5.75rem);
    /* min: 40px, max: 92px */
    ;
    text-align: right;

    a {
        text-align: left;
        font-size: 20px;
        display: inline-grid;
        justify-content: end;

        &::after {
            content: '';
            display: block;
            width: 96px;
            height: 8px;
            background: url(image/icon-more.svg) no-repeat 0 0;
        }
    }
}

#event {
    .more-link {
        a {
            color: white;

            &::after {
                background-image: url(image/icon-more-light.svg);
            }
        }
    }
}

/* *ANCHOR - Breadcrumb */

.block-system-breadcrumb-block{
        margin-bottom: 40px;
}


/* *!SECTION */

/* *SECTION - Frontpage */

/* *ANCHOR - Slideshow */

.name-slider.front {
    .slick {
        @media (min-width:1200px) {
            max-height: 664px;
        }
        .slide {
            position: relative;
            .views-field-field-image {
                float: right;
                img.image-style-silider{
                    opacity: 0;
                }
            }
            .slide-slogan {
                font-family: "Nothing You Could Do";
                font-size: 32px;
                color: var(--color-slogan);
                display: inline-block;
                transform: rotate(-10deg);
                margin-block: 0.8em;
                line-height: 1.2;
                padding-left: 1em;
                text-indent: -1em;
            }
            .slide-topic {
                color: var(--color-text-700);
                font-size: 36px;
                font-weight: 700;
                line-height: 1.3;
            }
            .slide-text {
                font-size: clamp(1.125rem, calc(1.006rem + 0.509vw), 1.25rem);
                /* min: 18px, max: 20px */
                line-height: 1.5;
                margin-top: 20px;
            }

            .entity-more {
                margin-top: clamp(1.25rem, calc(0.057rem + 5.089vw), 2.5rem);
                /* min: 20px, max: 40px */
                ;
            }

            @media (min-width: 768px) {
                .views-field-field-image {
                    width: 50%;
                }

                .slide-slogan {
                    font-size: clamp(2rem, calc(1.351rem + 2.027vw), 3.125rem);
                    /* min: 32px, max: 50px */
                    ;
                }

                .slide-topic {
                    color: var(--color-text-700);
                    font-size: clamp(2rem, calc(1.545rem + 1.939vw), 3rem); /* min: 32px, max: 48px */
                    white-space: nowrap;
                }

                .views-field:not(.views-field-field-image){
                    max-width: 45%;
                }
            }

            @media (min-width: 1400px) {
                .slide-slogan {
                    margin-block: unset;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: rotate(-10deg) translate(-40%, -170%);
                }

                .slide-topic {
                    margin-top: 25%;
                }
                .views-field:not(.views-field-field-image) {
                    max-width: 526px;
                }
            }
        }
    }
}

/* *ANCHOR - Slideshow slice img*/

.name-slider.front .slide{
    .img-slice {
        display: block;
        position: relative;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 664px;
    }
    
    .img-slice .sliced-svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .img-slice .slice {
        opacity: 0;
    }
}



/* *ANCHOR - path-frontpage */

.path-frontpage {
    .main {
        padding-block: unset;

        .node__content {
            margin-top: unset;
        }
    }

    .node__content {

        /* *ANCHOR - Slider */
        #slider {
            background: url(image/bg-slide-mobile.svg) no-repeat center bottom / 100%,
            linear-gradient(180deg, #F5EFF4 -1.87%, #FFFFFF 124.25%, #FAFAFA 167.57%);
            @media (min-width: 768px) {
                background: url("image/bg-slide-desktop.svg") no-repeat center top 200px,
                linear-gradient(180deg, #F5EFF4 -1.87%, #FFFFFF 124.25%, #FAFAFA 167.57%);
            }
            .container{
                --bs-gutter-x: 20px;
            }
        }

        &>*:not(#slider) {
            padding-block: clamp(2.5rem, calc(1.307rem + 5.089vw), 3.75rem);
            /* min: 40px, max: 60px */
        }

        /* *ANCHOR - Project */
        #project {
            .name-project {
                li{
                    position: relative;
                    padding-bottom: clamp(5.25rem, calc(3.819rem + 6.107vw), 6.75rem); /* min: 84px, max: 108px */
                    ;
                    .entity-more {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
                .entity-img{
                    position: relative;
                    &::after{
                        content: '';
                        display: block;
                        width: 47px;height: 57px;
                        background: url(image/icon-slash.svg) no-repeat 0 0;
                        position: absolute;
                        right: -20px;
                        bottom: -30px;
                        z-index: 3;
                    }
                }
                .entity-body{
                    &.trim{
                        @media (max-width: 768px) {
                            -webkit-line-clamp: 4;
                        }
                    }
                }
            }
        }

        /* *ANCHOR - Impact */
        #impact {
            background: url(image/bg-impact-m.svg) no-repeat 0 0 / 100%;
            @media (min-width: 768px){
                background-image: url(image/bg-impact-d.svg);
                background-position: center bottom;
                background-size: auto;
            }
            ul li {
                position: relative;

                .entity-number {
                    position: absolute;
                    top: 132px;
                    @media (min-width:428px) {
                        top: 35%;
                    }
                    left: 0;
                    width: 100%;
                    text-align: center;
                    color: white;
                    font-family: Poppins;
                    font-weight: 500;
                    text-shadow: 0px 0px 12px #000000B2;
                    .number {
                        font-size: 36px;
                        @container number-box (min-width:210px){
                            font-size: clamp(3.5rem, calc(3.023rem + 2.036vw), 4rem); /* min: 56px, max: 64px */;
                        }
                    }
                    .unit {
                        font-size: 18px;
                        @container number-box (min-width:210px){
                            font-size: 32px;
                        }
                    }
                }

                .impact-text {
                    flex: 1;
                    padding: 20px 30px;
                    background: linear-gradient(270deg, #FFE2F5 0%, #E3F5CE 100%);
                    .entity-title{
                        font-size: 22px;
                    }
                }
            }
        }

        /* *ANCHOR - News */
        #news{
            background: url(image/bg-news-m.svg) no-repeat 0 0 / 100%;
            @media (min-width: 768px){
                background-image: url(image/bg-news-d.svg);
                background-position: center top;
                background-size: auto 100%;
            }
        }

        /* *ANCHOR - Event */
        #event {
            background-color: var(--color-main-700);

            .block-title {
                color: white;
            }
        }

        /* *ANCHOR - CTA */
        #cta{
            background: var(--color-bg-cta);
            padding-bottom: clamp(1.75rem, calc(-0.795rem + 10.859vw), 5.938rem); /* min: 28px, max: 95px */;
            position: relative;
            .container{
                --bs-gutter-x: 20px;
            }
            .d-grid {
                grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
                gap: 28px 0;
            }

            @media (min-width: 992px) {
                background: linear-gradient(white 55%, var(--color-bg-cta) 0);
                .pink {
                    .entity-img img {
                        border-top-right-radius: unset;
                    }
                }
            }

            .entity-row {
                position: relative;
            }

            .views-field-field-image {
                position: relative;
                @media (max-width: 991px) {
                    width: 100vw;
                    left: 50%;
                    right: 50%;
                    margin-left: -50vw;
                    margin-right: -50vw;
                    padding: unset;
                    aspect-ratio: 1/1;
                    .entity-img{
                        width: 100%;height: 100%;
                        img {
                            border-radius: unset;
                            width: 100%;height: 100%;
                            object-fit: cover;
                            object-position: center top;
                        }
                    }
                }
                &::before{
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                }
            }
            .pink .views-field-field-image::before{
                background-color: #9C44827A;
                border-bottom-left-radius: 30px;
            }
            .green .views-field-field-image::before{
                background-color: #55644252;
                border-top-right-radius: 30px;
            }

            .cta-text {
                background-color: white;
                text-align: center;
                width: 100%;
                max-width: 595px;
                padding-block: 40px 90px;
                padding-inline: clamp(1.25rem, calc(0.057rem + 5.089vw), 2.5rem);
                /* min: 20px, max: 40px */
                border-radius: 30px;
                box-shadow: 0px 4px 8px 0px #0000000D;
                margin-inline: auto;
                margin-top: -40%;
                position: relative;
                
                @media (min-width: 992px) {
                    width: 90%;
                    margin-top: -30%;
                }
                @media (min-width: 1200px) {
                    aspect-ratio: 595/296;
                }
                .entity-title{
                    font-size: var(--fs-h2);
                }
                .views-field-body {
                    margin-top: clamp(0.938rem, calc(0.558rem + 1.621vw), 1.563rem);
                    /* min: 15px, max: 25px */
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
                .entity-more{
                    position: absolute;
                    bottom: 40px;
                    left: 50%;
                    transform: translateX(-50%);
                    a{
                        font-size: 15px;
                        letter-spacing: 0.15em;
                        padding: 12px 23px;
                    }
                }
            }
        }
    }

}

/* *!SECTION - Frontpage */

/* *SECTION - Section */

/* *ANCHOR - Banner */

.region-wrapper-featured-top{
    position: relative;
    &:has(.name-banner){
        height: clamp(18.438rem, calc(10.744rem + 32.824vw), 26.5rem); /* min: 295px, max: 424px */
        #block-pagetitle{
            position: absolute;
            left: 0;
            bottom: clamp(2.5rem, calc(1.307rem + 5.089vw), 3.75rem); /* min: 40px, max: 60px */;
            width: 100%;
            h1{
                text-align: center;
                color: white;
                font-size: var(--fs-h1);
            }
        }
    }
    &:has(.name-node){
        height: clamp(18.438rem, calc(6.932rem + 49.091vw), 43.75rem); /* min: 295px, max: 700px */;
    }
    &:has(.name-node, .name-banner){
        &::before{
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            z-index: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.8%, rgba(0, 0, 0, 0.49) 100%);
        }
    }
    &:has(#block-banner-secondary){
        #block-banner{
            display: none;
        }
    }
}

/* *ANCHOR - Submenu */
.views-exposed-form {
    margin: unset !important;
    .form-item {
        width: 100%;
        margin-bottom: unset !important;
    }
}

.main {
    nav:has(.nav-tabs),
    .bef-links,
    .block-menu{
        text-align: center;
        display: block;
        margin-bottom: 60px;
        position: relative;
        transition: box-shadow 0.3s ease;
        /* *ANCHOR - submenu shadow */
        &:has(.has-scroll-shadow-left)::before { 
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 30px;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
            border-radius: 50px 0  0 50px;
            pointer-events: none;
        }
        &:has(.has-scroll-shadow-right)::after { 
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 30px;
            background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
            border-radius: 0 50px 50px 0;
            pointer-events: none;
        }
        ul,
        div.nav-tabs{
            list-style: none;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 16px;
            justify-content: start;
            border: 1px solid var(--color-text-300);
            border-radius: 50px;
            padding: 5px !important;
            margin-inline: unset;
            margin-bottom: unset;
            overflow: auto;
            max-width: 100%;
            .bef-link,
            .nav-link{
                color: var(--color-text-900);
                border: unset;
                border-radius: 100px;
                letter-spacing: 0.05em;
                display: block;
                padding: .5rem 1rem !important;
                white-space: nowrap;
                &.active, &.is-active, &.bef-link--selected, &:hover{
                    color: white;
                    font-weight: 600;
                    background-color: var(--color-main-500);
                }
            }
        }
    }
    nav:has(.nav-tabs) .nav-tabs{
        
    }
}

/* *ANCHOR - Donation */

.name-donation.donation{
    .view-header{
        text-align: center;
        margin-bottom: 40px;
        .field--name-field-title{
            color: var(--color-main-300);
            font-family: Poppins;
            font-weight: 275;
            font-size: 52px;
            line-height: 95%;
        }
        .field--name-body{
            margin-top: 25px;
            font-family: Roboto;
            font-weight: 700;
            font-size: 24px;
            line-height: 150%;
            color: var(--color-main-700);
        }
    }
    ul.d-grid{
        gap: clamp(2.5rem, calc(0.115rem + 10.178vw), 5rem); /* min: 40px, max: 80px */;
        li{
            position: relative;
            .entity-img{
                position: absolute;
                inset: 0;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                }
            }
            .card{
                background-color: rgba(255, 255, 255, 0.9);
                width: 90%;
                margin-inline: auto;
                margin-block: 315px 20px;
                padding-block: clamp(1.25rem, calc(0.057rem + 5.089vw), 2.5rem); /* min: 20px, max: 40px */;
                padding-inline: clamp(1.25rem, calc(-1.135rem + 10.178vw), 3.75rem); /* min: 20px, max: 60px */;
                .entity-title{
                    color: var(--color-text-900);
                    font-size: clamp(2rem, calc(1.392rem + 2.593vw), 3rem); /* min: 32px, max: 48px */;
                    line-height: 1.2;
                    margin-bottom: 1.5rem;
                }
                .entity-more{
                    text-align: center;
                }
                @media (min-width:992px) {
                    margin: 30px 30px 30px auto;
                    width: 460px;
                    .entity-more{
                        text-align: right;
                        margin-top: 114px;
                    }
                }
            }
        }
    }
}

/* *ANCHOR - Fundraise */

.name-donation.fundraise{
    li.card{
        .entity-img{
            width: 100%;
            aspect-ratio: 1280 / 780;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
            .donate{
                display: none;
                position: absolute;
                left: 50%;top: 50%;
                transform: translate(-50%, -50%);
                a{
                    border: 1px solid white;
                }
            }
            .mask{
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32px;
                font-weight: 700;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(144,0,126, 0.8);
                border-top-right-radius: 30px;
            }
        }
        &:hover .donate{
            display: block;
        }
        .entity-title{
            margin-bottom: 0.5em;
        }
        @media (min-width: 768px) and (max-width: 1400px){
            .entity-title,
            .entity-body{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .entity-body{
                -webkit-line-clamp: 3;
            }
        }
        .donation-text{
            padding: 20px 20px 150px 20px;
            .progress-set{
                width: calc(100% - 40px);
                position: absolute;
                left: 20px;
                bottom: 40px;
            }
            .progress_bar{
                width: 100%;
                height: 5px;
                background-color: #ccc;
                display: flex;
                position: relative;
                .bar{
                    display: inline-block;
                    width: var(--progress);
                    max-width: 100%;
                    height: 100%;
                    background: linear-gradient(to right, rgba(172, 172, 172, 1)0%, var(--color-main-700)100%);
                }
                .label{
                    display: inline-block;
                    padding: 2px 5px;
                    background-color: var(--color-main-700);
                    color: white;
                    position: absolute;
                    top: 0;
                }
            }
            .amount{
                font-size: 15px;
                font-weight: 500;
                text-align: center;
                color: var(--color-text-500);
                margin-top: 10px;
                .achieved{
                    color: var(--color-main-700);
                }
            }
        }
    }
}

/* *ANCHOR - Impact */

#impact-taiwan,
#impact-africa{
    .block + .block{
        margin-top: 80px;
    }
    p{
        font-size: 18px;   
    }
}

#impact-map{
    .cta-text{
        font-size: clamp(1.25rem, calc(1.131rem + 0.509vw), 1.375rem); /* min: 20px, max: 22px */;
    }
}

/* *ANCHOR - Partner */

#partner-top{
    .layout__region--row-first{
        max-width: 860px;
        margin-inline: auto;
    }
}

#partner-partner{
    .layout__region.d-grid{
        row-gap:40px;
    }
}

.name-partner{
    ul.d-flex{
        flex-wrap: wrap;
        gap: 40px 80px;
        justify-content: center;
        align-items: center;
        .entity-logo{
            .entity-title{
                color: var(--color-logo);
            }
            &:has(img){
                .entity-title{
                    display: none;
                }
            }
        }
    }
}

.block-views-blockpartner-block-2{
    ul.d-flex{
        li{
            @media (max-width:768px) {
                flex: 0 0 calc(50% - 40px);
            }
        }
    }
}

/* *ANCHOR - Join/events */

.name-event{
    li.card{
        padding-bottom: 90px;
        .entity-more{
            position: absolute;
            right: 0;
            bottom: 20px;
        }
        .entity-img {
            width: 100%;
            aspect-ratio: 650/491;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
            .mask{
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32px;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.7);
                background-color: #292929A6;
                border-top-right-radius: 30px;
            }
        }
    }

}


/* *ANCHOR - report */

.name-report{
    li.card{
        padding-bottom: 60px;
        .entity-more{
            position: absolute;
            left: 20px;
            bottom: 20px;
        }
    }
}

/* *ANCHOR - News */

.name-news{
    li.card{
        padding-bottom: 90px;
        .entity-more{
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
    }
}


/* *ANCHOR - About */

/* *ANCHOR - About/team */

#team{
    .block + .block{
        margin-top: 80px;
    }
}

/* *ANCHOR - About/chronicles */

.page-node-100092{
    @media (min-width: 992px) {
        #block-chronicles-title{
            float: left;
            margin-bottom: 60px;
            & , .block-title{
                text-align: left !important;
            }
        }
        #block-menu-about{
            float: right;
            margin-top: 60px;
            max-width: calc(100% - 380px);
        }
        #block-chronicles-title,
        #block-menu-about{
            position: relative;
            z-index: 3;
        }
    }
}

#block-chronicles-title{
    text-align: center;
    margin-block: 60px 40px;
    .block-title{
        margin-bottom: 10px;
    }
}

.name-chronicles{
    ul.d-grid{
        max-width: 1040px;
        margin-inline: auto;
        row-gap: 60px;
        @media (min-width: 992px){
            row-gap: unset;
        }
        li.d-grid{
            gap: 10px 60px;
            .views-field-field-date{
                position: relative;
                &::before{
                    content: '';
                    display: block;
                    width: 100vw;
                    height: 1px;
                    background-color: var(--color-text-200);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%);
                }
                @media (min-width:992px) {
                    &::before{
                        width: 1px;
                        height: 100%;
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    
                }
            }
            .entity-year{
                color: var(--color-main-700);
                font-family: Poppins;
                font-weight: 500;
                font-style: Italic;
                font-size: clamp(1.75rem, calc(1.273rem + 2.036vw), 2.25rem); /* min: 28px, max: 36px */;
                line-height: 1;
                display: grid;
                row-gap: 18px;
                width: clamp(10.938rem, calc(8.552rem + 10.178vw), 13.438rem); /* min: 175px, max: 215px */;
                margin-inline: auto;
                time{
                    position: relative;
                    white-space: nowrap;
                    &:first-child{
                        text-align: right;
                    }
                    &:last-child{
                        order: -1;
                        &:after{
                            content: '';
                            display: block;
                            width: 9px;height: 9px;
                            border-radius: 50%;
                            background-color: var(--color-main-500);
                            position: absolute;
                            left: 50%;
                            bottom: -14px;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
            .entity-title{
                color: var(--color-main-500);
                font-size: 26px;
                margin-bottom: clamp(0.625rem, calc(-0.135rem + 3.241vw), 1.875rem); /* min: 10px, max: 30px */
            }
            @media (min-width: 992px) {
                grid-template-columns: 28% 215px 1fr;
                .entity-img,
                .chronicle-text{
                    padding-bottom: clamp(3.75rem, calc(3.154rem + 2.545vw), 4.375rem); /* min: 60px, max: 70px */;
                }
                .views-field-field-date{
                    margin-top: unset;
                    .entity-year{
                        padding-top: 40px;
                    }
                }
                .entity-title{
                    margin-top: 40px;
                }
            }
        }
    }
}

.name-cp{
    &.entity-list.combo{
        ul.d-grid{
            li.card{
                padding: 20px;
                border: unset;
                box-shadow: unset;
            }
        }
    }
}

#milestone{
    background-color: var(--color-main-50);
    .entity-list.combo{
        ul.d-grid{
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            row-gap: clamp(0.625rem, calc(-1.164rem + 7.634vw), 2.5rem); /* min: 10px, max: 40px */;
            li.d-grid{
                grid-template-columns: 1fr 110px;
                gap: 20px;
                justify-content: space-between;
                align-items: center;
                .combo-text{
                    order: -1;
                }
                @media (min-width: 992px) {
                    grid-template-columns: 1fr;
                    gap: 0;
                    .combo-text{
                        order: unset;
                    }
                    .views-field-field-image{
                        display: flex;
                        justify-content: end;
                        img{
                            max-width: 160px;
                        }
                    }
                }
                .entity-subtitle{
                    font-family: Poppins;
                    font-weight: 500;
                    font-size: 60px;
                    line-height: 1.2;
                }
                .entity-title{
                    font-size: 20px;
                }
                &:nth-child(4n+1){
                    background-color: var(--color-main-100);
                    & , .entity-title{
                        color: var(--color-main-700);
                    }
                }
                &:nth-child(4n+2){
                    background-color: var(--color-main-500);
                    & , .entity-title{
                        color: white;
                    }
                }
                &:nth-child(4n+3){
                    & , .entity-title{
                        color: var(--color-main-500);
                    }
                }
                &:nth-child(4n+4){
                    background-color: var(--color-main-700);
                    & , .entity-title{
                        color: white;
                    }
                }
            }
        }
    }
}

#future{
    background: linear-gradient(270deg, #FFE2F5 0%, #E3F5CE 100%);
    .card{
        .views-field-field-image{
            display: flex;
            justify-content: center;
            margin-bottom: clamp(0rem, calc(-1.14rem + 4.862vw), 1.875rem); /* min: 0px, max: 30px */;
            img{
                width: clamp(10rem, calc(7.615rem + 10.178vw), 12.5rem); /* min: 160px, max: 200px */;
            }
        }
    }
}

/* *!SECTION - Section */

/* *SECTION - Node */

.path-node {
    &:not(&.node--type-layout, &.node--type-project){
        .main{
            padding-block: 50px 80px;
            &:has(.block-system-breadcrumb-block),
            .partnerships{
                max-width: 900px;
                margin-inline: auto;
            }
        }
    }
    article.node--type-page{
        max-width: 900px;
        margin-inline: auto;
    }
}

.addtoany_list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    a{
        display: block;
        width: 40px;height: 40px;
        background: url(image/btn-share-Facebook.svg) no-repeat 0 0;
        span.a2a_svg{
            display: none;
        }
        &.a2a_button_linkedin{
            background-image: url(image/btn-share-LinkedIn.svg);
        }
        &.a2a_button_x{
            background-image: url(image/btn-share-X.svg);
        }
        &.a2a_button_copy_link{
            background-image: url(image/btn-share-link.svg);
        }
    }
}

.node-header {
  .entity-row {
    .views-field-title {
      h1 {
        font-size: 1.5rem;

        @media (min-width: 768px) {
          font-size: 2rem;
        }

        @media (min-width: 1200px) {
          font-size: 3rem;
        }
      }
    }
  }
}


/* *ANCHOR - News */

.node{
    &.node--type-news{
        .node__content{
            .layout{
                padding-block: unset;
            }
        }
    }
    .name-node.node-header{
        margin-bottom: 60px;
        h1{
            margin-block:0 40px;
        }
    }
    #share, #related{
        margin-top: 40px;
    }
    #share{
        .d-grid{
            row-gap: 1rem;
            @media (min-width: 768px) {
                grid-template-columns: auto 1fr;
                align-items: end;
            }
        }
    }
    #related{
        .block:has(.name-news){
            padding-top: 40px;
            border-top: 1px solid var(--color-text-300);
        }
    }
}

.field--name-field-tax-tag{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: unset;
    @media (min-width: 768px){
        justify-content: right;
    }
    a{
        display: block;
        padding: 5px 15px 5px 12px;
        background-color: var(--color-text-200);
        &::before{
            content: '# ';
        }
    }
}

/* *ANCHOR - Composition: Impact Factor */

.impact{
    ul.d-grid{
        text-align: center;
        li.card{
            padding: 40px 30px 26px;
            .views-field-field-image img{
                width: clamp(8.125rem, calc(5.74rem + 10.178vw), 10.625rem); /* min: 130px, max: 170px */;
            }
            .entity-number{
                margin-block: 20px;
            }
            .entity-title{
                font-size: 22px;
            }
        }
    }
}

/* *ANCHOR - Project */

.name-slider.project{
    .vvjs-item-inner{
        position: relative;
        .link-fulfill a{
            position: absolute;
            inset: 0;
        }
    }
}

.name-story{
    ul.d-grid{
        row-gap: 100px;
        li.d-grid{
            .entity-img{
                position: relative;
                margin-bottom: 2em;
                img{
                    position: relative;
                    z-index: 2;
                };
                &::before{
                    content: '';
                    display: block;
                    width: 100%;height: 100%;
                    background-color: var(--color-main-300);
                    position: absolute;
                    bottom: -15px;;
                    right: -15px;
                    border-radius: 0 30px 0 30px;
                }
            }
            .entity-title{
                margin-bottom: 30px;
            }
            @media (min-width:768px) {
                align-items:flex-start ;
                grid-template-columns: calc(50% - 20px) 1fr;
                column-gap: 40px;
                .entity-img{
                    margin-bottom: unset;
                }
                .views-field-field-link{
                    grid-column: 1/3;
                    text-align: center;
                }
            }
            @media (min-width:1200px) {
                align-items: center;
                grid-template-columns: 33% 1fr;
                column-gap: 80px;
            }
        }
    }
}

/* *!SECTION - Node */

/* *SECTION - CRM */

.path-civicrm:not(.civicrm-contribute-sp) {
    .featured-top,
    .layout-main-wrapper{
        .container{
            max-width: 900px;
        }
    }
}

.crm-container{
    .progress-block {
        .progress-bar{
            background-color: var(--color-main-100);
        }
        .progress-pointer{
            color: var(--color-text-900);
        }
    }
    .achieved-text{
        background-color: rgba(238, 238, 238, .65);
        padding: 1em;
    }
    #printer-friendly,
    .form-item[id^="huo_dong_ye_e_wai_she_ding_lan_wei"]{
        display: none;
    }
    a.button,
    .action-link .button.crm-register-button,
    input.form-submit{
        font-size: 15px;
        padding: 11px 48px !important;
        border-radius: 40px 40px;
        background: var(--color-main-500) !important;
        color: white;
        &#_qf_Subscribe_cancel-top{
            & , &:hover{
                color: white;
                background: var(--color-text-500) !important;
            }
        }
    }
    a.button{
        width: unset;
        height: unset;
        line-height: 1;
        border-radius: 40px !important;
    }
    #help,
    div.messages,
    div.status{
        background-color: var(--color-main-500);
        .seat-msg{
            color: white;
        }
    }
    .header-dark{
        color: var(--color-text-900);
        background-color: var(--color-main-100);
    }
}

/* *!SECTION - CRM */

/* *SECTION - Google Map */

.nm-map-wrap{position:relative;max-width:100%}
.nm-map-wrap iframe{
width:100%;height:480px;border:0;
pointer-events:none; 
}

.nm-map-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

.nm-map-label{
position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;
}
.nm-map-hint{
background:rgba(255,255,255,.8);
padding:.5rem .75rem;border-radius:8px;color:#333;line-height:1.4
}
.nm-map-label:focus-within .nm-map-hint{outline:2px solid #2b8aeb;outline-offset:2px}

.nm-map-toggle:checked ~ iframe{pointer-events:auto}
.nm-map-toggle:checked + .nm-map-label{display:none}

.nm-map-wrap:focus-within iframe{pointer-events:auto}


/* *!SECTION - CRM */

/* *NOTE - The End */