* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body { overflow-x: hidden; }

@-moz-document url-prefix() {
    html {
        scrollbar-width: thin;
        scrollbar-color: #D5D5D5 #F1F1F1;
    }
}

html::-webkit-scrollbar {
    width: 5px; 
}

html::-webkit-scrollbar-thumb {
    background: #E6E6E6; 
    height: 87px;
    border-radius: 3px;
}

:root {
    --primary-color: #EF6730;
    --secondary-color: #F3F4F6; 
    --hover-color: #4C5C90;
}

.Container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
}

.content, .content1 {
    display: flex;
    width: 100%;
    max-width: 1266px; 
}

.content1 { flex-direction: column; }

header {
    background: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    min-height: 100px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    align-items: center;
    justify-content: space-between;
}

.menu {
    display: flex;
    align-items: center;
    gap: 25px;
    a {
        color: black;
        text-decoration: none;
        font: 14px 'BPG Mrgvlovani Caps 2010';
        line-height: 19px;
        position: relative;
        &::after {
            content: '';
            background: transparent;
            width: 100%; height: 4px;
            position: absolute;
            bottom: -41px; left: 0;
            transition: all 0.3s ease;
        }
    }
}
.menu a:hover::after, .menu a.active::after { background: var(--primary-color); }

.language-change {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-change > span:first-of-type {
    color: var(--text-color);
    -webkit-text-stroke: 0.5px var(--text-color);
    font: 12px 'Helvetica';
    line-height: 18px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 31px;
    height: 18px;
}
  
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
  
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 3px;
    background: var(--primary-color);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
  
input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

.banner {
    position: relative;
    width: 100%; height: 500px;
    img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

.banner-text {
    background: rgba(239, 103, 48, 0.96);
    border-radius: 10px;
    color: white;
    font: 20px 'Helvetica';
    line-height: 24px;
    max-width: 520px;
    position: absolute;
    left: calc(50vw - 633px);
    bottom: 50px;
    padding: 30px 50px;
}

.mission-cont { 
    padding: 50px 20px 180px; 
    position: relative;
    z-index: 2;
}

.mission {
    background: var(--secondary-color);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 100px 40px 100px 140px;
}

.mission-left {
    width: 410px;
    > p:first-child {
        color: black;
        font: 50px 'Helvetica Bold';
        line-height: 60px;
        margin: 0;
    }
    hr {
        background: var(--primary-color);
        border: none;
        opacity: 1;
        height: 5px; width: 225px;
        margin: 15px 0 35px;
    }
    div {
        color: black;
        font: 20px 'Helvetica Roman';
        line-height: 22px;
    }
}

.mission-right {
    position: relative;
    width: calc(100% - 420px);
    max-width: 570px;
    img { position: absolute; border-radius: 5px; }
    img:first-child { top: -70px; left: 0; }
    img:nth-child(2) { top: 270px; left: 50px; }
    img:last-child { top: -10px; right: 0; }
}

.page-title {
    color: black;
    -webkit-text-stroke: 0.5px black;
    text-align: center;
    font: 20px 'BPG Mrgvlovani Caps 2010';
    line-height: 28px;
    margin-bottom: 30px;
}

.cooperation-cont { padding-bottom: 115px; }
.cooperation-swiper { max-width: 1070px; }
.coop-slide {
    text-decoration: none;
    width: 340px !important;
    .text {
        color: black;
        font: 14px 'Helvetica Roman';
        line-height: 18px;
        margin-bottom: 25px;
    }
}

.img-cont {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    img {
        border-radius: 10px;
        width: 100%; height: 395px;
        object-fit: cover;
    }
    span {
        color: white;
        font: 24px 'BPG Mrgvlovani Caps 2010';
        line-height: 30px;
        -webkit-text-stroke: 0.5px white;
        position: absolute;
        left: 30px; bottom: 30px;
    }
}

.learn-more {
    background: var(--secondary-color);
    color: #4B4B4B;
    border-radius: 25px;
    font: 14px 'Helvetica Roman';
    line-height: 19px;
    width: 160px; height: 50px;
    transition: all 0.3s ease;
}

.coop-slide:hover .learn-more {
    background: black;
    color: white;
}

.news-prev { padding-bottom: 70px; }
.news-swiper { 
    width: 100%; 
    padding-bottom: 50px !important;
}

.news-card.swiper-slide { width: 400px !important; }

.news-card {
    display: flex !important;
    align-items: flex-start;
    text-decoration: none;
    img {
        border-radius: 10px 0 0 10px;
        width: 180px; height: 270px;
        object-fit: cover;
    }
}
.news-card:hover .see-all { gap: 10px; }

.news-desc {
    background: var(--secondary-color);
    border-radius: 0 10px 10px 0;
    color: black;
    padding: 30px 15px 25px 30px;
    min-height: 270px;
    .date {
        font: 12px 'Helvetica Roman';
        line-height: 16px;
        margin-bottom: 15px;
    }
    .title {
        display: -webkit-box;
        font: 16px 'Helvetica Bold';
        line-height: 20px;
        max-height: 60px;
        overflow: hidden;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        margin-bottom: 15px;
    }
    .intro {
        display: -webkit-box;
        font: 12px 'Helvetica Roman';
        line-height: 14px;
        max-height: 70px;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        -webkit-box-orient: vertical;
        margin-bottom: 15px;
    }
}

.see-all {
    color: var(--primary-color);
    display: flex;
    gap: 5px;
    font: 12px 'Helvetica Bold';
    line-height: 18px;
    margin: 0;
    transition: all 0.3s ease;
}

.swiper1 .swiper-pagination-bullet {
    background: #DBDBDB;
    border-radius: 50%;
    color: white;
    width: 10px; height: 10px;
    opacity: 1;
}
.swiper1 .swiper-pagination-bullet-active { background: var(--primary-color); }

.membership-cont {
    background: var(--secondary-color);
    padding: 60px 20px;
    .content { 
        align-items: center;
        justify-content: space-between;
        max-width: 930px; 
    }
}

.membership-cont .text {
    color: black;
    font: 16px 'Helvetica';
    line-height: 22px;
    width: calc(100% - 250px)
}

.membership-cont a {
    background: rgba(239, 103, 48, 0.81);
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font: 14px 'Helvetica';
    line-height: 14px;
    width: 200px; height: 50px;
    transition: all 0.3s ease;
    &:hover { background: #575757; }
}

footer {
    background: var(--primary-color);
    padding: 37px 20px !important;
}

.footer-content {
    align-items: center;
    justify-content: space-between;
}

.socials {
    display: flex;
    gap: 10px;
    > a {
        background: white;
        border-radius: 50%;
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        width: 25px; height: 25px;
        transition: all 0.3s ease;
        i { color: var(--primary-color); }
        i, img { transition: all 0.3s ease; }
        &:hover { 
            background: black;
            img { filter: brightness(0) invert(1); }
            i { color: white; }
        }
    }
}

.copyright, .creator {
    color: white;
    font: 12px 'Helvetica Roman';
    line-height: 14px;
    a { color: unset; text-decoration: none; }
}

.page-head {
    width: 100%; height: 400px;
    position: relative;
    margin-bottom: 60px;
    img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }
    span {
        color: white;
        font: 50px 'Helvetica Bold';
        line-height: 60px;
        position: absolute;
        left: calc(50vw - 490px); bottom: 70px;
        z-index: 2;
    }
    &::before {
        content: '';
        background: rgba(0,0,0,0.32);
        position: absolute;
        inset: 0;
        z-index: 1;
    }
}

.content-text {
    color: black;
    font: 20px 'Helvetica Roman';
    line-height: 22px;
    max-width: 980px;
    margin-left: calc(50vw - 490px);
    margin-bottom: 60px;
    position: relative;
    div { position: relative; z-index: 2; }
    &::after {
        content: '';
        background: url('../images/decor.svg') no-repeat center center / cover;
        width: 810px; height: 900px;
        position: absolute;
        left: 0; top: -60px;
        z-index: 1;
    }
}

.members-cont { padding-bottom: 140px; }
.members-grid {
    display: grid;
    grid-template-columns: repeat(3, 217px);
    justify-content: center;
    gap: 45px;
    margin-bottom: 50px;
}
.members-grid:last-child {
    grid-template-columns: repeat(4, 217px);
    margin-bottom: 0;
}

.member-card {
    p:first-child {
        color: black;
        -webkit-text-stroke: 0.5px black;
        font: 14px 'BPG Mrgvlovani Caps 2010';
        line-height: 19px;
        text-align: center;
        margin-bottom: 5px;
    }
    p:nth-child(2) {
        color: #858585;
        font: 14px 'Helvetica Roman';
        line-height: 17px;
        text-align: center;
        margin-bottom: 14px;
    }
    img {
        border-radius: 50%;
        width: 200px; height: 200px;
        object-fit: cover;
    }
}

.supporters-text { 
    min-height: 480px; 
    &::after { height: 600px; }
}

.gallery-cont { padding-bottom: 90px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    a { display: flex; }
    img {
        border-radius: 5px;
        width: 100%; height: 295px;
        object-fit: cover;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    button {
        background: white;
        border: 1px solid #C6C6C6;
        border-radius: 5px;
        color: #8E8E8E;
        font: 13px 'BPG Mrgvlovani Caps 2010';
        line-height: 18px;
        width: 50px; height: 50px;
        transition: all 0.3s ease;
        &:hover, &.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
    }
}

.news-cont { padding: 60px 20px 90px; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.media {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.curr-media { width: calc(100% - 430px); }

.media-head {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
    img {
        border-radius: 10px 0 0 10px;
        width: 55%; height: 270px;
        object-fit: cover;
    }
    div {
        background: #F9F9F9;
        border-radius: 0 10px 10px 0;
        min-height: 270px;
        padding: 45px 35px 10px 40px;
        width: 45%;
    }
    .date {
        color: var(--primary-color);
        font: 16px 'Helvetica Bold';
        line-height: 20px;
        margin-bottom: 30px;
    }
    .title {
        color: black;
        display: -webkit-box;
        font: 30px 'Helvetica Bold';
        line-height: 35px;
        height: 108px;
        margin-bottom: 0;
        overflow: hidden;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

.media-text {
    background: #F9F9F9;
    border-radius: 20px;
    padding: 40px 35px 30px;
    hr {
        border-color: #EAEAEA;
        opacity: 1;
        margin: 40px 0;
    }
    > div:first-child {
        color: black;
        font: 12px 'BPG Mrgvlovani';
        line-height: 16px;
        * { font-family: 'BPG Mrgvlovani' !important; }
        b, strong { font-weight: bold !important; }
    }
}

.share {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.go-back {
    color: black;
    -webkit-text-stroke: 0.5px black;
    text-decoration: none;
    font: 14px 'BPG LE Studio 02 Caps';
    line-height: 19px;
    transition: all 0.3s ease;
    p { margin-bottom: 0; }
    div { display: none; }
    &:hover {
        color: var(--primary-color);
        -webkit-text-stroke-color: var(--primary-color);
    }
}

.share-links {
    display: flex;
    align-items: center;
    gap: 10px;
    span {
        color: black;
        font: 12px 'BPG Mrgvlovani';
        line-height: 16px;
    }
    div {
        background: #ECECEC;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        width: 35px; height: 35px;
        transition: all 0.3s ease;
        img { width: 7px; filter: brightness(0) invert(0); transition: all 0.3s ease; }
        &:hover {
            background: var(--primary-color);
            color: white;
            img { filter: brightness(0) invert(1); }
        }
    }
}

.copy-link.copied { transform: scale(1.2); }

.other-media {
    width: 400px;
    > p:first-child {
        font: 18px 'Helvetica Bold';
        line-height: 20px;
        margin-bottom: 30px;
    }
    > div {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}