@font-face {
    font-family: 'Text';
    src: url('/assets/fonts/Lora/Lora-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Title';
    src: url('/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* CSS RESET END */

/* BEGIN debug */

img[src=""] {
    background: red;
    aspect-ratio: 1 / 1;
}

/* END debug */

:root {
    --primary: #176F71;
    --primary-text: #fff;
    --secondary-text: #343434;
    --lightgrey-text: #505050;
    --secondary: #3D947A;
    --highlight-line: #DFCB73;
    --highlight: #DFCB73;
    --highlight-text: #000;
    --background: #F8F8F8;
    font-size: 16px;
    font-family: 'Text';
}

p,
a {
  font-family: 'Text';
}

em {
    font-family: 'Title';
    font-style: italic;
    /* font-weight: 600; */
}

strong {
    font-weight: 800;
}

h1,
h2,
h3,
h5,
figcaption {
  font-family: 'Title';
}

.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.page-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    @media (max-width: 768px) {
        padding: 0;
    }
}

.container-2 {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.container-3 {
    max-width: 82rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.header-nav {
    background: rgba(23, 111, 113, 0.9);
    color: var(--primary-text);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    padding: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    & > a {
        opacity: 100%;
        transition: opacity 0.3s ease;
        img {
            width: 14rem;
            height: 100%;
        }
        &:hover {
            opacity: 80%;
        }
    }
    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        li {
            padding: 0 0.5rem;
            /* border-left: 1px solid var(--highlight-line); */
            .header-item {
                position: relative;
                font-family: 'Title';
                font-size: 1.1rem;
                display: block;
                text-decoration: none;
                color: inherit;
                padding: 0.5rem;
                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background: var(--highlight);
                    transform: translateX(-50%) scaleX(0);
                    transform-origin: center;
                    transition: transform 0.2s ease;
                }
                &:hover::after {
                    transform: translateX(-50%) scaleX(1);
                }
            }
            /* &:first-child, &:nth-child(4) {
                border-left: 0;
            } */
        }
    }
    @media (max-width: 768px) {
        height: 2rem;
        & > a {
            img {
                width: 10rem;
            }
        }
        ul li {
            padding: 0.5rem 0;
            .header-item {
                font-size: 1.2rem;
                &::after {
                    display: none;
                }
            }
        }
    }
}

.donate-btn {
    text-decoration: none;
    border-radius: 5px;
    background-color: var(--highlight);
    color: var(--highlight-text)!important;
    padding: 0.6rem 1.5rem;
    transition: background-color 0.3s ease!important;
    &:hover {
        background-color: rgb(236, 207, 79);
    }
}


.spacer {
    height: 3rem;
    padding: 1rem;
    @media (max-width: 768px) {
        height: 2rem;
    }
}

.header-background {
    width: 100%;
    max-height: 50rem;
    object-fit: cover;
    object-position: 0 7.5%;
    margin-top: -5.5rem;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    /* margin-top: -5.5rem; */
    .slider {
        display: flex;
        flex-direction: column;
        aspect-ratio: 16 / 9;
        max-height: 82vh;
        width: 100%;
        overflow-y: auto;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        & > img {
            flex: 1 0 100%;
            scroll-snap-align: start;
            object-fit: cover;
            /* object-position: 0 -5rem; */
        }
    }
    .slider-nav {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: absolute;
        right: 1.5rem;
        bottom: 50%;
        /* transform: translateY(-50%); */
        z-index: 1;
        & > a {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.75;
            transform: opacity 250ms ease;
        }
        & > a:hover {
            opacity: 1;
        }
    }
    @media (max-width: 768px) {
        .slider {
            max-height: 67vh;
            height: 100vh;
        }
        .slider-nav {
            display: none;
        }
    }
}

.quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -5rem;
    margin-bottom: 5rem;
    .quick-links-items {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        z-index: 1;
        a {
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            background-color: white;
            width: 13rem;
            height: 13rem;
            img {
                width: 4rem;
                transition: transform ease 0.2s;
            }
            span {
                text-decoration: none;
                color: black;
                font-family: 'Title';
                font-size: 1.3rem;
                line-height: 1.8rem;
                padding: 0 1.2rem;
                transition: transform ease 0.2s;
            }
        }
        a:nth-child(2), a:nth-child(4) {
            background-color: #F2F2F2;
        }
        a:nth-child(2), a:nth-child(3) {
            img {
                margin-top: 0.6rem;
            }
        }
        a:first-child {
            border-radius: 5px 0 0 5px;
        }
        a:nth-child(4) {
            border-radius: 0 5px 5px 0;
        }
        a:first-child:hover, a:nth-child(2):hover, a:nth-child(3):hover, a:nth-child(4):hover {
            span, img {
                transform: translate(0, -10px);
            }
        }
    }
    @media (max-width: 768px) {
        margin-top: 1rem;
        .quick-links-items {
            & > a {
                width: 10rem;
                height: 10rem;
                & > img {
                    width: 3rem;
                }
                & > span {
                    font-size: 1rem;
                    line-height: 1.5rem;
                    padding: 0 1.3rem;
                }
            }
            @media (max-width: 479px) {
                a:nth-child(2), a:nth-child(4) {
                    background-color: white;
                }
                a:first-child, a:nth-child(4) {
                    background-color: #F2F2F2;
                }
            }
        }
    }
}

.section-space {
    margin-bottom: 5rem;
}

.grey-section {
    background-color: var(--background);
    padding: 5rem 0;
}

.two-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7rem;
}

.content-list, .about-content, .about-image {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.more {
    font-family: 'Title';
    font-size: 1.2rem;
    text-decoration: none;
    background-color: var(--secondary);
    color: var(--primary-text);
    padding: 0.8rem 1.8rem;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.more:hover {
    background-color: var(--primary);
}

.homepage-main-content {
    display: flex;
    gap: 4rem;
    justify-content: center;
    flex-wrap: wrap;
    & > div {
        flex: 1;
    }
}

.article-list {
    .homepage-articles {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        & > a {
            text-decoration: none;
            display: flex;
            color: black;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.3rem;
            border-bottom: 2px solid #ececec;
            transition: box-shadow 0.2s ease;
            &:hover {
                box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.25);
            }
            img {
                width: 9rem;
                height: 6rem;
                border-radius: 0.3rem;
                display: block;
                object-fit: cover;
                object-position: center;
            }
    
            div {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                h1 {
                    font-size: 1rem;
                    line-height: 1.2rem;
                }
                span {
                    font-size: 0.8rem;
                    color: var(--lightgrey-text);
                    font-weight: 500;
                }
            }
        }
        @media (max-width: 768px) {
            & > a {
                div h1 {
                    font-size: 0.85rem;
                    line-height: 1rem;
                    display: -webkit-box; 
                    line-clamp: 3;
                    -webkit-line-clamp: 3; 
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                div span {
                    font-size: 0.7rem;
                }
            }
        }
    }
}

.rubrics-list {
    .rubric {
        & > h2 {
            font-size: 1.1rem;
            padding-top: 1.5rem;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid var(--primary);
            margin-bottom: 0.8rem;
            & > a {
                text-decoration: none;
                color: var(--secondary-text);
                font-family: 'Title';
                transition: color 0.2s ease;
                &:hover {
                    color: var(--lightgrey-text);
                }
            }
        }
        .rubric-item {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            /* border-bottom: 1px solid var(--primary); */
            border-bottom: 2px solid #ececec;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;

            & > a {
                text-decoration: none;
                color: var(--primary);
                font-family: 'Title';
                font-size: 1.1rem;
                transition: color 0.2s ease;
                &:hover {
                    color: var(--secondary);
                }
            }

            & > span {
                font-size: 0.8rem;
                color: var(--secondary-text);
                font-weight: 600;
            }
        }
    }
}

.styled-title {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid var(--primary);
    height: 2rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
    & > a {
        font-family: 'Title';
        font-size: 1.1rem;
        text-decoration: none;
        color: white;
        background-color: var(--secondary);
        border-radius: 0.3rem;
        padding: 0.6rem 1.5rem;
        transition: background-color 0.2s ease;
        &:hover {
            background-color: var(--primary);
        }
    }
}

.content-list {
    ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        li {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            /* border-bottom: 1px solid var(--primary); */
            border-bottom: 2px solid #ececec;
            padding-bottom: 1rem;
            a {
                font-size: 1.1rem;
                font-weight: bold;
                line-height: 1.8rem;
                text-decoration: none;
                color: var(--primary);
                max-width: 34rem;
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: color 0.2s ease;
            }
            a:hover {
                color: var(--secondary);
            }
            time {
                font-size: 0.8rem;
                font-weight: bold;
                color: var(--secondary-text);
            }
            .author {
                font-size: 1rem;
                font-weight: 500;
            }
        }
    }
}

.list-grey {
    ul li {
        a {
            color: var(--lightgrey-text);
        }
    }
}

.about {
    align-items: center;
    .about-content {
        align-items: baseline;
        p {
            color: var(--secondary-text);
            font-size: 1rem;
            font-weight: 500;
            line-height: 2rem;
            word-wrap: break-word;
            overflow-wrap: break-word;
            display: -webkit-box; 
            line-clamp: 5;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .about-image {
        width: 100%;
        min-width: 19rem;
        border-radius: 0.3rem;
    }
}

.spacer {
    height: 3rem;
    padding: 1rem;
    @media (max-width: 768px) {
        height: 2rem;
    }
}

.grey-header::before, .grey-header-2::before, .article-header::before {
    content: "";
    height: 3rem;
    @media (max-width: 768px) {
        height: 2rem;
    }
}

.grey-header {
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 4rem 0;
    h1 {
        font-size: 3rem;
        text-align: center;
    }
    .author {
        font-size: 1.5rem;
    }
    .translation {
        color: var(--primary);
    }
    & > .tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        max-width: 50%;
    }
    @media (max-width: 768px) {
        margin-top: -1.5rem;
        h1 {
            font-size: 2rem;
        }
        & > .tags {
            max-width: 80%;
        }
    }
}

.grey-header-2 {
    background-color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 4rem 0 8rem 0;
    h1 {
        font-size: 3rem;
        text-align: center;
    }
    h2 {
        text-align: center;
    }
    .parent-title {
        font-size: 2rem;
        color: var(--primary);
    }
    .author {
        font-size: 1.5rem;
    }
    .translation {
        color: var(--primary);
    }
    @media (max-width: 768px) {
        h1 {
            font-size: 1.8rem;
        }
        .parent-title {
            font-size: 1.4rem;
        }
        .author {
            font-size: 1.2rem;
        }
    }
}

.grey-footer-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    clear: both;
    padding: 2rem 0;
    .section-space + & {
        margin-top: -9rem;
        padding-top: 8rem;
    }
    &::before {
        content: " ";
        background-color: var(--background);
        inset: 0 0 0 0;
        position: absolute;
        z-index: -1;
    }

    .copyright {
        text-align: center;
        line-height: 1.5em;
        margin-top: 3rem;
    }
}
.grey-header-2 .links, .grey-footer-2 .links {
    width: 100%;
    max-width: 80rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "prev up next";
    align-items: center;
    gap: 0.5rem;
    & > .prev {
        text-align: left;
        grid-area: prev;
    }
    & > .up {
        text-align: center;
        grid-area: up;
    }
    & > .next {
        text-align: right;
        grid-area: next;
    }
    a {
        text-decoration: none;
        img {
            width: 1rem;
        }
        & > span {
            font-family: 'Title';
            font-size: 1.2rem;
            color: var(--secondary-text);
            transition: color 0.2s ease;
        }
        &:hover > span {
            color: var(--secondary);
        }
    }
    @media (max-width: 768px) {
        & > .prev img, .next img {
            width: 2rem;
            background-color: white;
            padding: 1rem;
        }
        & > .prev span, .next span {
            display: none;
        }
        & > .up span {
            font-size: 1rem;
        }
    }
}

.eleventy-plugin-youtube-embed {
    margin-bottom: 1rem;
}

.page {
    background-color: white;
    padding: 3.5rem 6.5%;
    line-height: 1.5;
    margin-top: -4rem;
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-bottom: 5rem;
    h1, h2, h3, h4, p, td, ul, ol {
        color: var(--secondary-text);
    }
    h1 {
        text-align: center;
        font-size: 1.5rem;
        margin-bottom: 2rem;
        text-wrap: balance;
    }
    h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        text-wrap: balance;
    }
    h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
        text-wrap: balance;
    }
    h4 {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
        text-wrap: balance;
    }
    img {
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
        border: 3px solid #eee;
    }
    p, ul, ol, blockquote, table {
        margin-bottom: 1rem;
    }
    p, td, ul, ol {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    p, a {
        text-align: justify;
    }
    ul, ol {
        margin-bottom: 0.8rem;
        margin-top: 0;
    }
    ul li {
        list-style-type: disc;
        margin-left: 3rem;
        font-size: 0.9rem;
    }
    ol li {
        list-style-type: decimal;
        margin-left: 3rem;
        font-size: 0.9rem;
    }
    a {
        color: var(--secondary-text);
        &:hover {
            color: var(--secondary);
        }
    }
    hr {
        border: 0;
        border-top: 1px solid #eee;
        margin: 1.2rem 0;
    }
    blockquote {
        margin-left: 0.5rem;
        padding-left: 1rem;
        border-left: 0.5rem solid rgba(0, 0, 0, 0.25);
    }
    table {
        td {
            border: 1px solid rgba(0, 0, 0, 0.5);
            padding: 0.5rem 1rem;
        }
    }
    &::after {
        content: "";
        display: block;
        clear: both;
    }
    table {
        margin: 0 auto;
    }
    iframe {
        display: block;
        margin: 1rem auto;
        padding: 1rem 0;
        border-radius: 0.3rem;
        background-color: var(--background);
    }
}

.alert {
    padding: 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    & > p {
        margin: 0;
    }
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-link {
    color: #2b542c;
    font-weight: 700;
}

.img-left {
    display: block;
    margin-right: auto;
}
  
.img-right {
    display: block;
    margin-left: auto;
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img-float-left {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    display: block;
    float: left;
    clear: left;
}

.img-float-right {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    display: block;
    float: right;
    clear: right;
}

@supports selector(:is(p):has(+ .img-float-left)) {
    :is(p, h1, h2, h3, h4, ol, ul):has(+ .img-float-left)::after {
        content: "";
        display: block;
        clear: left;
    }
    :is(p, h1, h2, h3, h4, ol, ul):has(+ .img-float-right)::after {
        content: "";
        display: block;
        clear: right;
    }
    .img-float-left {
        clear: unset;
    }
    .img-float-right {
        clear: unset;
    }
    blockquote {
        clear: both;
    }
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.h1 {
    font-size: 1.5rem !important;
    font-family: 'Title';
}

.h2 {
    font-size: 1.3rem !important;
    font-family: 'Title';
}

.image-gallery {
    h1 {
        margin-bottom: 0.5rem;
    }
    h2 {
        margin-left: 1.5rem;
        margin-bottom: 0.5rem;
    }
}

.principles {
    max-width: 50rem;
    padding: 0 2rem;
    h1 {
        text-align: center;
        font-size: 1.5rem;
        padding-bottom: 1.5rem;
    }
    & > hr {
        border: none;
        border: 1px solid var(--primary);
        width: 4rem;
        margin: 0 auto;
        margin-bottom: 2.5rem;
    }
    ol {
        list-style-type: decimal;
        li {
            margin-bottom: 2rem;
            line-height: 1.5rem;
            color: var(--secondary-text);
        }
    }
}

.board {
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
        text-align: center;
        font-size: 1.5rem;
        position: relative;
        padding-bottom: 1rem;
    }
    & > hr {
        border: none;
        border: 1px solid var(--primary);
        width: 4rem;
        margin: 0 auto;
    }
    .members {
        margin-top: 5rem;
        display: flex;
        justify-content: center;
        gap: 8rem;
        text-align: center;
        flex-wrap: wrap;
        .member {
            & > img {
                border-radius: 50%;
                margin-bottom: 0.5rem;
                width: 10rem;
            }
            & > h2 {
                font-size: 1.3rem;
                margin-bottom: 0.5rem;
            }
            & > h3 {
                font-size: 1rem;
                color: var(--primary);
            }
            @media (max-width: 768px) {
                & > img {
                    width: 9rem;
                }
                & > h2 {
                    font-size: 1.2rem;
                }
                & > h3 {
                    font-size: 0.9rem;
                }
            }
        }
    }
}

.contact-container {
    background-color: var(--background);
    padding: 5rem 0;
    & > h1 {
        text-align: center;
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }
    & > hr {
        border: none;
        border: 1px solid var(--primary);
        width: 4rem;
        margin: 0 auto;
    }
    .contact-form {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem;
        .form-row {
                display: flex;
                flex-direction: column;
                margin-bottom: 1.25rem;
            & > label {
                font-weight: 600;
                margin-top: 1rem;
                margin-bottom: 0.5rem;
            }
            & > input, textarea {
                    font-style: inherit;
                    font-size: 0.9rem;
                    padding: 0.6rem 0.75rem;
                    border-radius: 0.25rem;
                    border: 1px solid #ccc;
                &:focus {
                    outline: none;
                    border-color: #555;
                }
            }
        }
        .submit-btn {
                margin-top: 1rem;
                padding: 0.75rem 1.25rem;
                font-weight: 600;
                cursor: pointer;
                border: none;
                border-radius: 4px;
                background-color: #222;
                color: #fff;
            &:hover {
                background-color: #000;
            }
        }
        @media (min-width: 600px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;

            .form-row {
                margin-bottom: 0;
                &:nth-child(3), &:nth-child(4) {
                    grid-column: span 2;
                }
            }
            .submit-btn {
                grid-column: span 2;
            }
        }
    }
}

.books {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 5rem;
    padding: 0 4rem;
}

.book {
    display: flex;
    flex-direction: column;
    background-color: white;
    align-items: center;
    box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.25);
    padding: 1rem 0;
    border-radius: 5px;
    width: 17rem;
    img {
        width: 100%;
        /* max-width: 18.5rem; */
    }
    .book-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
        width: 74%;
        /* max-width: 13.5rem; */
        h1 {
            font-size: 1rem;
            height: 2.2rem;
        }
        p {
            font-size: 0.7rem;
            color: var(--secondary-text);
        }
        span {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--primary);
        }
        & > a {
            text-decoration: none;
            background-color: var(--primary);
            color: white;
            padding: 0.7rem 1rem;
            border-radius: 0.3rem;
            text-align: center;
            transition: background-color 0.2s ease;
            &:hover {
                cursor: pointer;
                background-color: var(--secondary);
            }
        }
    }
    @media (max-width: 768px) {
        width: 15rem;
        .book-content {
            width: 70%;
            & > span {
                font-size: 1.3rem;
            }
            & > a {
                font-size: 0.8rem;
                padding: 0.7rem 1rem;
            }
        }
    }
}

.books-info {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    .books-info-row {
        display: flex;
        gap: 3rem;
        .books-info-text {
            width: 100%;
            line-height: 1.5rem;
        }
        .books-info-video {
            width: 100%;
        }

        @media (max-width: 768px) {
            flex-wrap: wrap;
            flex-direction: column;
            gap: 2rem;
        }
    }
    .books-info-row:nth-child(2) {
        @media (max-width: 768px) {
            .books-info-text {
                order: 1;
            }
            .books-info-video {
                order: 2;
            }
        }
    }
}

.more-books {
    .more-books-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        .book {
            .book-content {
                & > h1 {
                    font-size: 0.9rem;
                    height: 1.5rem;
                }
            }
        }
        @media (max-width: 768px) {
            .book:nth-child(n+3) {
                display: none;
            }
            .book {
                .book-content {
                    & > h1 {
                        font-size: 0.8rem;

                    }
                    & > p {
                        font-size: 0.6rem;
                    }
                    & > a {
                        font-size: 0.65rem;
                        padding: 0.5rem;
                    }
                }
            }
        }
    }
}

.more-2 {
    text-decoration: none;
    font-weight: 500;
    color: var(--primary-text);
    background-color: var(--primary);
    align-self: baseline;
    padding: 0.7rem 1.2rem;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background-color 0.1s ease;
}

.more-2:hover {
    background-color: var(--secondary);
}

.answers {
    display: flex;
    flex-direction: row;
    gap: 5rem;
    margin-top: 5rem;
    .answer-list {
        /* width: 50%; */
        display: flex;
        flex-direction: column;
        gap: 2rem;
        background-color: var(--background);
        padding: 2rem;
        a {
            text-decoration: none;
            color: var(--secondary-text);
            line-height: 1.6rem;
            font-size: 1rem;
            transition: color 0.1s ease;
            &:hover {
                color: var(--primary);
            }
        }
        .answer-active {
            color: var(--primary);
            font-weight: 600;
        }
        .closebtn {
            display: none;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            font-size: 3.5rem;
            color: var(--secondary);
        }
    }
    .openbtn {
        display: none;
        color: white;
        background-color: var(--primary);
        border: none;
        border-radius: 0 1rem 1rem 0;
        padding: 0.5rem 1.5rem;
        font-family: 'Title';
        font-size: 1rem;
        align-self: baseline;
        margin-left: -1.5rem;
        /* left: 0%; */
        /* top: 10%; */
        /* position: absolute */
    }
    .answer-content {
        width: 100%;
        height: 100%;
        background-color: white;
        padding: 3.5rem;
        line-height: 1.5rem;
        box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        margin-bottom: 5rem;
        h2 {
            text-align: center;
            font-size: 1.5rem;
            line-height: 1.8rem;
        }
        .eleventy-plugin-youtube-embed {
            margin: 2rem 0;
        }
        p {
            margin: 1rem 0;
        }
        ul li {
            margin-left: 2rem;
            list-style: disc;
        }
    }
}

@media (max-width: 768px) {
    .answers {
        gap: 2rem;
        margin-top: 2rem;
        flex-direction: column;
        align-items: center;

        .answer-list {
            display: none;
            height: 100%;
            /* width: 0; */
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: var(--background);
            overflow-x: hidden;
            padding-top: 3.5rem;
            transition: 0.2s;

            a {
                font-weight: 600;
                color: var(--secondary-text);
            }

            .answer-active {
                color: var(--primary);
                font-weight: 600;
            }

            .closebtn {
                display: block;
            }
        }

        .openbtn {
            display: block;
        }

        .answer-content h2 {
            font-size: 1.2rem;
        }
    }
}

.full-hs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    img {
        border-radius: 5px;
        box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.25);
    }
    .full-hs-sidenav {
        display: flex;
        flex-direction: column;
        gap: 5rem;
        background-color: var(--background);
        padding: 2rem;
        border-radius: 5px;
        h1 {
            text-align: center;
            font-size: 1.8rem;
            color: var(--primary);
        }
        .nested-list {
            font-size: 1.2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            list-style-type: none;
            /* & > ::marker {
                content: counter(list-item) " ";
            } */
            a {
                font-size: 1.2rem;
                text-decoration: none;
                color: var(--secondary-text);
                transition: color 0.1s ease;
            }
            a:hover, .list-item:hover {
                color: var(--primary);
            }
            & > li {
                /* margin-bottom: 1rem; */
                & > ol {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                    margin-top: 1.5rem;
                    list-style-type: circle;
                    padding-left: 1rem;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.2s ease-out;
                    li {
                        margin-left: 1.5rem;
                        a {
                            color: var(--secondary);
                        }
                    }
                }
                & > .list-item {
                    cursor: pointer;
                    position: relative;
                    padding-left: 1.5rem;
                    color: var(--secondary-text);
                    transition: color 0.1s ease;
                    &::before {
                        content: '+';
                        position: absolute;
                        left: 0;
                    }
                }
            }

            & > li.active {
                & > ol {
                    max-height: 43rem; /* (font-size + gap) * max count * 2 lines = (1.2+1.5)*8*2 = 43.2 */
                    transition: max-height 0.4s ease-out;
                    padding-bottom: 0.2rem;
                }

                & > .list-item::before {
                    content: '-';
                }
            }

            @supports (interpolate-size: allow-keywords) {
                & > li > ol {
                    max-height: unset;
                    transition: height 0.3s ease-out;
                    height: 0;
                    interpolate-size: allow-keywords;
                }
                & > li.active > ol {
                    height: auto;
                }
            }

            & > li.active > .list-item {
                transition: color 0.3s ease;
            }

            & > li.active > .list-item {
                color: var(--primary);
                font-weight: 600;
            }
        }
        @media (max-width: 768px) {
            .list-item {
                font-size: 1rem;
            }
            li.active ol li a {
                font-size: 1rem;
            }
        }
    }
    img {
        width: 20rem;
        height: 100%;
    }
    @media (max-width: 768px) {
        & > img {
            margin: 0 auto;
        }
        & > .full-hs-sidenav {
            margin-bottom: 2rem;
        }
    }
}

.news {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    .news-article {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        h1 {
            font-size: 1.5rem;
            max-width: 60%;
        }
        h2 {
            font-size: 1.2rem;
            color: var(--primary);
        }
        .media-img {
            width: 10rem;
        }
        time {
            color: var(--lightgrey-text);
            font-style: italic;
        }
        .news-content {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 3rem;
            .news-text {
                line-height: 1.5rem;
                color: var(--secondary-text);
                width: 100%;
                max-width: 50rem;
                p {
                    margin-bottom: 1rem;
                }
            }
            .thumbnail {
                width: 100%;
                max-width: 30rem;
                max-height: 20rem;
                border-radius: 5px;
            }
        }
        & > a {
            font-size: 1.2rem;
            font-weight: 500;
            text-decoration: none;
            color: var(--primary-text);
            background-color: var(--primary);
            align-self: baseline;
            padding: 0.7rem 3rem;
            border-radius: 5px;
            transition: background-color 0.2s ease;
        }
        & > a:hover {
            background-color: var(--secondary);
        }
        hr {
            border: none;
            background-color: var(--secondary-text);
            width: 100%;
            height: 1.5px;
            opacity: 0.2;
        }
    }
    @media (max-width: 960px) {
        .news-article {
            & > a {
                margin: 0 auto;
                margin-top: 1rem;
            }
            h1 {
                font-size: 1.2rem;
                max-width: 100%;
            }
            .media-img {
                max-width: 7rem;
            }
            .news-content {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }
}

.positions {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.homepage-positions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    & > .position {
        padding: 1rem 2rem;
        h1 {
            font-size: 1.1rem;
            line-height: 1.3rem;
            color: var(--primary);
        }
        p {
            font-size: 0.8rem;
        }
        .tags {
            display: none;
        }
    }
}

.position {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: black;
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
    h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    hr {
        border: none;
        background-color: var(--secondary-text);
        width: 100%;
        height: 1px;
        transform: scaleY(2);
        opacity: 0.2;
    }
    & > .tags {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    &:hover {
        box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.3);
    }
    @media (max-width: 768px) {
        h1 {
            font-size: 1rem;
            line-height: 1.2rem;
        }
        & > .tags {
            gap: 0.3rem;
            .tag {
                font-size: 0.6rem;
            }
        }
        & > p {
            font-size: 0.9rem;
        }
    }
}

b {
    font-weight: 700;
}
i {
    font-style: italic;
}

.tag {
    font-family: 'Title';
    text-align: center;
    text-decoration: none;
    color: black;
    background-color: var(--highlight);
    padding: 0.2rem 0.8rem;
    border-radius: 10px;
    @media (max-width: 768px) {
        font-size: 0.8rem;
    }
}
  
.tag-filter {
    background: #eee;
    border: none;
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all .2s ease;
    &:hover {
        background-color: #ddd;
    }
    &.active {
        background: var(--secondary);
        color: white;
        transform: scale(1.05);
    }
}

.pagination-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}

.p-btn {
    padding: 0.5rem 0.8rem;
    border: 1px solid #ccc;
    background: #f7f7f7;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all .2s ease;
    &:hover {
        background-color: #e6e6e6;
    }
    &.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
}

.ellipsis {
    padding: 0 .5rem;
    opacity: 0.6;
}

.clear-filters {
    border: none;
    border-radius: 0.3rem;
    padding: 0.5rem 0.7rem;
    background-color: var(--highlight);
    color: black;
    transition: all 0.1s ease;
    font-family: 'Title';
    font-size: 0.9rem;
    &:hover {
        cursor: pointer;
        background-color: #edd87a;
    }
}

.article-header {
    background-color: var(--background);
    padding-top: 4rem;
    padding-bottom: 8rem;
    .article-header-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: last baseline;
        gap: 1rem;
        & > .info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 65%;
            & > h1 {
                font-size: 1.8rem;
                line-height: 2.3rem;
            }
            & > h2 {
                font-family: 'Text';
                color: var(--secondary-text);
                font-size: 0.9rem;
            }
        }
        & > .tags {
            display: flex;
            gap: 0.5rem;
            max-width: 50%;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            .tag {
                font-size: 0.9rem;
            }
        }
        @media (max-width: 768px) {
            flex-direction: column;
            align-items: center;
            & > .info {
                max-width: 100%;
                & > h1 {
                    font-size: 1.5rem;
                    line-height: 1.8rem;
                }
            }
            & > .tags {
                max-width: 100%;
                justify-content: start;
                gap: 0.3rem;
                .tag {
                    font-size: 0.7rem;
                }
            }
        }
    }
    .book-header-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        & > .info {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            max-width: 40rem;
            .back {
                text-decoration: none;
                color: var(--primary);
                font-size: 1.2rem;
                font-weight: 500;
                transition: color 0.1s ease;
            }
            .back:hover {
                color: var(--secondary);
            }
            .text-content {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                & > h1 {
                    font-size: 2.3rem;
                    line-height: 2.3rem;
                }
                & > h2 {
                    font-family: 'Text';
                    font-size: 1rem;
                }
                & > h3 {
                    color: var(--primary);
                }
            }
            .price {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 1.5rem;
                & > span {
                    font-size: 2rem;
                    font-family: 'Text';
                    font-weight: 600;
                    color: var(--primary);
                }
                .order {
                    text-decoration: none;
                    color: white;
                    background-color: var(--primary);
                    padding: 0.8rem 1.8rem;
                    border-radius: 5px;
                    font-weight: 500;
                    transition: background-color 0.1s ease;
                }
                .order:hover {
                    background-color: var(--secondary);
                }
            }
        }
        & > img {
            /* min-width: 22rem; */
            height: auto;
        }
        @media (max-width: 768px) {
            justify-content: center;
            align-items: center;
            text-align: center;
            & > .info {
                align-items: center;
                gap: 2rem;
                .text-content {
                    h1 {
                        font-size: 1.8rem;
                    }
                    h2 {
                        font-size: 0.9rem;
                    }
                }
                .price {
                    & > span {
                        font-size: 1.8rem;
                    }
                    .order {
                        padding: 0.7rem 1.5rem;
                    }
                }
            }
            & > img {
                max-width: 20rem;
                margin-top: 2rem;
            }
        }
    }
    @media (max-width: 768px) {
        margin-top: -1.5rem;
    }
}

.article {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    text-decoration: none;
    padding: 1rem;
    border-radius: 5px;
    transition: box-shadow 0.2s ease;
    background-color: var(--background);
    /* border: 1px solid rgb(230, 230, 230); */
    & > img {
        width: 100%;
        height: 15rem;
        border-radius: 5px;
        display: block;
        object-fit: cover;
        object-position: center;
    }
    .article-details {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        .article-author {
            color: var(--primary);
            font-weight: 600;
        }
        .article-date {
            color: var(--lightgrey-text);
        }
    }
    & > h1 {
        font-family: 'Text';
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.5rem;
        color: black;
    }
    .article-description {
        color: var(--lightgrey-text);
        font-size: 0.9rem;
        line-height: 1.2rem;
    }
    & > .tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem;
        .tag {
            font-size: 0.7rem;
        }
    }
}
.article:hover {
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.25);
}

.featured-article {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    .featured-img {
        width: 100%;
        background-color: white;
        padding: 1rem;
        border-radius: 5px;
        img {
            width: 100%;
            border-radius: 5px;
        }
    }
    .featured-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2.5rem;
        h1 {
            color: var(--primary);
            font-size: 2.3rem;
            text-align: left;
            line-height: 2.8rem;
        }
        span {
            font-size: 1.2rem;
            line-height: 1.6rem;
            color: var(--lightgrey-text);
        }
        a {
            text-decoration: none;
            color: var(--secondary);
            font-weight: 600;
            font-size: 1.1rem;
            align-self: baseline;
        }
        a:hover {
            color: var(--primary);
        }
        @media (max-width: 768px) {
            & > h1 {
                font-size: 1.5rem;
                line-height: 2rem;
            }
            & > span {
                font-size: 1rem;
            }
        }
    }
}

.newest-articles-container {
    & > h1 {
        display: flex;
        align-items: center;
        font-size: 2.2rem;
        border-left: 4px solid var(--primary);
        height: 4rem;
        padding-left: 1rem;
        margin-bottom: 3rem;
    }
    .newest-articles {
        display: flex;
        gap: 1rem;
        & > .article {
            width: 100%;
            .article-description {
                word-wrap: break-word;
                overflow-wrap: break-word;
                display: -webkit-box; 
                line-clamp: 3;
                -webkit-line-clamp: 3; 
                -webkit-box-orient: vertical; 
                overflow: hidden; 
                text-overflow: ellipsis;
            }
        }
    }
}

.articles-container {
    & > h1 {
        display: flex;
        align-items: center;
        font-size: 2.2rem;
        border-left: 4px solid var(--primary);
        height: 4rem;
        padding-left: 1rem;
        margin-bottom: 3rem;
    }
    .articles-filter-container {
        background-color: var(--background);
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        .articles-filter {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 3rem 1.5rem;
            gap: 2rem;
            & > .tags {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 0.6rem;
                font-size: 0.9rem;
            }
            .search-container {
                display: flex;
                height: 3rem;
                #search-results {
                    z-index: 1;
                    input {
                        border: 2px solid var(--primary);
                        font-family: 'Text';
                    } 
                    .pagefind-ui__button {
                        background-color: var(--highlight);
                    }
                    .pagefind-ui__search-clear {
                        padding: 0 1rem;
                    }
                    .pagefind-ui__message {
                        background-color: var(--background);
                    }
                    .pagefind-ui__results {
                        background-color: var(--background);
                        padding: 0 2rem;
                    }
                }
            }
        }
    }
    .articles {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
        grid-auto-rows: auto;
        gap: 3rem 1rem;
    }
}

.newsletter {
    background-color: var(--background);
    padding: 5rem 0;
    .newsletter-items {
        max-width: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        & > h1 {
            font-size: 2.2rem;
            color: var(--primary);
            text-align: center;
        }
        & > p {
            color: var(--secondary-text);
            text-align: center;
            line-height: 1.3rem;
        }
        & > form {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            input {
                padding: 0.5rem 1.5rem;
                border: 2px solid var(--primary);
                outline: none;
                border-radius: 5px;
            }
            input::placeholder {
                font-family: 'Title';
            }
            button {
                padding: 0.5rem 1.5rem;
                background-color: var(--primary);
                color: white;
                border: none;
                border-radius: 5px;
                font-family: 'Title';
                font-size: 1rem;
            }
            button:hover {
                cursor: pointer;
                background-color: var(--secondary);
            }
        }
    }
}

.resources {
    h1 {
        font-size: 2rem;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
    hr {
        opacity: 30%;
    }
    figure {
        margin-bottom: 2rem;
        figcaption {
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }
        ul {
            list-style-type: disc;
            padding-left: 2rem;
            display: flex;
            flex-direction: column;
            li {
                padding: 0.5rem 2rem;
                a {
                    text-decoration: none;
                    color: var(--primary);
                    font-size: 1.1rem;
                    transition: color 0.1s ease;
                    img {
                        width: 2.5rem;
                    }
                }
                a:hover {
                    color: var(--secondary);
                }
            }
        }
        @media (max-width: 768px) {
            ul li a {
                img {
                    width: 2rem;
                }
            }
        }
    }
    .recommended-books {
        .recommended-books-text {
            margin-bottom: 2rem;
            line-height: 1.3rem;
        }
        ul {
            li {
                p {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: 0.5rem 0;
                    font-size: 1.1rem;
                    .book-age {
                        margin-right: 1rem;
                        flex-shrink: 0;
                        font-size: 1rem;
                    }
                    .book-details {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-grow: 1;
                        gap: 0.3rem;
                        font-size: 1rem;
                        & > a {
                            transition: opacity 0.1s ease;
                        }
                        & > a:hover {
                            opacity: 70%;
                        }
                    }
                }
            }
        }
        @media (max-width: 768px) {
            ul li p {
                .book-age {
                    font-size: 0.75rem;
                }
                .book-details {
                    font-size: 0.85rem;
                    flex-wrap: wrap;
                }
            }
        }
    }
}

.donations {
    background-color: var(--background);
    padding: 4rem;
    .donations-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8rem;
    }
}

.donation-types {
    display: flex;
    flex-direction: column;
    gap: 7rem;
    img {
        width: 8rem;
    }
    .bank-transfer {
        display: flex;
        gap: 1rem;
    }
    .easy-pay {
        display: flex;
        gap: 1rem;
        img {
            align-self: flex-start;
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        & > h1 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary);
        }
        & > p {
            line-height: 1.3rem;
        }
    }
}

.donation-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background-color: var(--background);
    border-radius: 0.3rem;
    box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    padding: 2rem;
    /* margin: 0 auto; */
    /* margin-bottom: 5rem; */
    button {
        font-family: 'Title';
        font-size: 1.2rem;
        font-weight: 600;
        border: 2px solid var(--background);
        border-radius: 0.3rem;
        background-color: var(--secondary);
        color: var(--primary-text);
        padding: 0.8rem 1rem;
        transition: all 0.1s ease;
    }
    button:hover {
        cursor: pointer;
        background-color: rgba(61, 148, 122, 0.8);
    }
    button.active {
        background-color: rgba(61, 148, 122, 0.15);
        border: 2px solid var(--primary);
        color: var(--primary);
    }
    .donate-btn {
        width: 10rem;
        font-weight: 400;
        background-color: var(--highlight);
        color: black;
    }
    .donate-btn:hover {
        background-color: var(--highlight);
        opacity: 85%;
    }
    .arrow {
        max-width: 1.2rem;
    }
    h1 {
        font-size: 2rem;
        text-align: center;
        color: var(--primary);
    }
    .tabs-header {
        background-color: var(--primary);
        width: 100%;
        .tabs-header-content {
            padding: 1.5rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button {
                padding: 0;
                border-style: none;
                background-color: unset;
            }
            .tabs-header-nav-1 {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1.5rem;
                & > span {
                    color: var(--primary-text);
                    font-family: 'Title';
                    font-size: 1.2rem;
                }
            }
            .tabs-header-nav-2 {
                display: flex;
                align-items: center;
                gap: 1.5rem;
                .lock {
                    max-width: 0.7rem;
                    height: auto;
                }
                .circles {
                    display: flex;
                    gap: 0.5rem;
                    .circle {
                        width: 0.7rem;
                        height: 0.7rem;
                        border-radius: 50%;
                        border: 1px solid #fff;
                    }
                    & > .circle-active {
                        background-color: #fff;
                    }
                }
            }
        }
    }
    .tab-content {
        display: none;
        width: 100%;
        padding: 0;
        .floating-input {
            position: relative;
            display: flex;
            .error-message {
                position: absolute;
                left: 1rem;
                bottom: -1rem;
                color: red;
                font-size: 14px;
                margin-top: 5px;
            }
            & > input {
                position: relative;
                width: 100%;
                padding: 1rem;
                border: none;
                border-bottom: 2px solid var(--primary);
                font-family: 'Title';
                font-size: 1.2rem;
                background-color: transparent;
                z-index: 1;
                &:focus {
                    outline: none;
                    border-color: var(--secondary);
                }
                &:focus ~ .label-line, &:not(:placeholder-shown) ~ .label-line {
                    top: -0.5rem;
                    left: 0.8rem;
                    font-size: 0.8rem;
                    color: var(--secondary);
                }
            }
            & > .label-line {
                position: absolute;
                left: 1rem;
                top: 1rem;
                color: #999;
                transition: all 0.2s ease;
                pointer-events: none;
                z-index: 0;
            }
        }
    }
    .tab-content.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    /* first tab - amount */
    .tab-amount {
        .donation-suggested-amount {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.8rem 1rem;
            & > button {
                width: 7rem;
                font-weight: 400;
            }
        }
        .donation-calculated-amount {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
            .custom-amount {
                width: 15rem;
                padding: 0.5rem 0;
                border-radius: 0.3rem;
            }
            .custom-amount[type="text"] {
                font-size: 1.5rem;
                font-weight: 600;
                text-align: right;
                color: var(--primary);
                border: 2px solid var(--primary);
                padding-right: 0.5rem;
            }
            .custom-amount:focus {
                outline: none;
                box-shadow: 0 0 10px var(--secondary);
            }
            & > span {
                font-family: 'Title';
                font-weight: 600;
                font-size: 1.5rem;
                color: var(--primary);
            }
            .error-message {
                position: absolute;
                bottom: -1.5rem;
                color: red;
                font-size: 14px;
                margin-top: 5px;
            }
        }
    }
    /* second tab - info */
    .tab-info {
        & > .floating-input {
            width: 100%;
        }
    }
    /* third tab - payment */
    .tab-payment {
        font-family: 'Title';
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.2rem;
    }
}

.thank-you-form {
    display: none;
    max-width: 30rem;
    width: 100%;
    background-color: var(--background);
    border-radius: 0.3rem;
    box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    padding: 2rem;
    text-align: center;
    & > img {
        width: 80%;
        margin-bottom: 0.5rem;
    }
    & > h1 {
        font-size: 2rem;
        color: var(--primary);
        line-height: 2.5rem;
    }
}

.table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;

    th, td {
        text-align: left;
        padding: 0.8rem 1rem;
    }

    th {
        font-family: 'Title';
        font-weight: 600;
        font-size: 1.1rem;
    }

    td {
        border-top: 1px solid #ddd;
        width: 30%;
    }

    .td-title {
        width: 70%;
        font-size: clamp(0.9rem, 0.5269rem + 1.194vw, 1rem);
    }

    .td-price {
        color: var(--primary);
        font-weight: 600;
        font-size: 1.1rem;
        font-size: clamp(0.9rem, 0.5269rem + 1.194vw, 1.1rem);
    }

    input {
        width: 3.5rem;
        padding: 0.5rem;
        text-align: center;
        font-size: 0.9rem;
        border: 1px solid var(--primary);
        border-radius: 0.3rem;
    }
}

.order-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.total {
    align-self: flex-end;
    font-weight: 500;
}

#econt-office {
    width: 100%;
}

.order-info {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 2rem;
    width: 100%;
    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;

    & > input {
        height: 1.5rem;
        font-size: 1rem;
        transition: box-shadow 0.2s ease-in-out;
        &:focus {
            outline: none;
            box-shadow: 0px 0px 5px var(--primary);
            /* border: 1px solid var(--secondary); */
        }
    }
}

.required-label::after {
    content: '*';
    color: red;
    margin-left: 0.2rem;
}

.shipment {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;

    & > select {
        border: none;
        color: white;
        background-color: var(--primary);
        width: 100%;
        height: 2rem;
        font-family: 'Title';
        font-size: 1rem;
        margin-bottom: 1rem;

        &:hover {
            background-color: var(--secondary);
        }
    }
}

.dropdown {
    border: 1px solid #ccc;
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    & > li {
        padding: 0.5rem;
        cursor: pointer;
        &:hover {
            background-color: #eee;
        }
    }
}

#econt-search {
    height: 1.5rem;
    font-size: 0.9rem;
    transition: box-shadow 0.2s ease-in-out;
    &:focus {
        outline: none;
        box-shadow: 0px 0px 5px var(--primary);
    }
}

.btn-send {
    font-family: 'Title';
    font-size: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--highlight);
    border: none;
    border-radius: 0.3rem;
    transition: background-color 0.1s ease;
    &:hover {
        cursor: pointer;
        background-color: #ead579;
    }
}

footer {
    background-color: #135455;
    position: relative;
    hr {
        background-color: var(--primary-text);
        height: 0.1rem;
        opacity: 30%;
        border: none;
    }
    .social-medias {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        margin-top: 1rem;
        li a {
            opacity: 100%;
            transition: opacity 0.2s ease;
            &:hover {
                opacity: 80%;
            }
        }
    }
    .footer-copyright {
        background-color: var(--primary);
        padding: 1rem 6rem;
        small {
            color: var(--primary-text);
        }
        @media (max-width: 768px) {
            padding: 1rem;
            font-size: 0.8rem;
        }
    }
    .footer-content {
        display: flex;
        justify-content: center; 
        align-items: flex-start; 
        flex-wrap: wrap;
        max-width: 1300px;
        margin: 0 auto;
        .donation-contact {
            /* text-align: left; */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            img {
                width: 16rem;
                height: 100%;
                padding-bottom: 1rem;
                border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            }
            .contact {
                line-height: 1.2rem;
                & > p {
                    color: var(--primary-text);
                }
                & > a {
                    text-decoration: underline;
                    font-weight: 600;
                }
            }
            li {
                margin: 1rem;
            }
        }
        a {
            text-decoration: none;
            color: var(--primary-text);
            transition: color 0.3s ease;
            &:hover {
                color: var(--highlight);
            }
        }
        div {
            flex: 1;
            margin: 3rem 5.5rem;
            @media (max-width: 768px) {
                margin: 1.5rem 3.5rem;
            }
        }
        nav {
            ul {
                li {
                    position: relative;
                    margin: 0.7rem 0;
                    padding-bottom: 0.5rem;
                    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
                    &::before {
                        content: "";
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        width: 0%;
                        height: 2px;
                        background-color: var(--highlight);
                        transition: width 0.3s ease;
                        pointer-events: none;
                    }
                    &:has(> a:hover)::before {
                        width: 100%;
                    }
                }
            }
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            .button {
                width: 45%;
                align-self: flex-end;
                margin-bottom: 1rem;
                padding: 0.5rem 0;
                background-color: var(--primary);
                color: var(--primary-text);
                border: none;
                border-radius: 0.2rem;
                text-align: center;
            }
            input {
                padding: 0.5rem;
            }
        }
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
      }

    .header-nav ul {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(23, 111, 113, 0.95);
        flex-direction: column;
        padding: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    
    .header-nav ul.active {
        max-height: 13rem;
        opacity: 1;
        padding: 1rem 0;
    }
    
    .header-nav li {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
        border-left: none !important;
    }
    
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }
    
    .header-nav ul li .donate-btn {
        display: block;
        width: 80%;
        margin: 0.5rem auto;
        text-align: center;
        position: relative; 
    }

    .featured-img,
    .newsletter,
    .newest-articles-container {
        display: none;
    }

}

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

@media (max-width: 768px) {
    .donations-container {
        flex-direction: column;

    }
}