/* Donar-inspired layout, original styling */
:root {
    --up-green:#176b5c;
    --up-gold:#ffa900;
    --up-black:#161616
}

html {
    scroll-behavior:smooth
}

body {
    overflow-x:hidden
}

.donar-topbar {
    position:relative
}

.donar-navbar {
    position:sticky!important;
    top:0;
    z-index:1000!important;
    box-shadow:0 6px 18px rgba(0,0,0,.045)
}

.up-hero {
    margin:12px 14px 0;
    min-height:610px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:34px;
    background:#061a16;
    color:#fff
}

.up-hero-bg,.up-hero-tint {
    position:absolute;
    inset:0;
    z-index:-1
}

.up-hero-bg {
    background-image:url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1800&q=85');
    background-size:cover;
    background-position:center;
    transition:opacity .55s,transform 5.5s;
    transform:scale(1.04)
}

.up-hero-bg.is-changing {
    opacity:.15;
    transform:scale(1.11)
}

.up-hero-tint {
    background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,20,15,.83) 40%,rgba(0,25,20,.18) 100%)
}

.up-hero-inner {
    position:relative;
    max-width:750px;
    padding:112px 0 55px 9%;
    z-index:2
}

.up-kicker {
    color:var(--up-gold);
    font-size:20px;
    font-style:italic;
    font-weight:700;
    margin:0 0 20px
}

.up-hero h1 {
    font-size:clamp(38px,4.4vw,70px);
    line-height:1.12;
    color:white;
    margin:0 0 24px;
    font-weight:800;
    letter-spacing:-1.8px
}

.up-hero h1 em {
    color:var(--up-gold);
    font-style:normal
}

.up-hero-inner>p:not(.up-kicker) {
    font-size:14px;
    line-height:1.9;
    max-width:550px;
    color:#f1f1f1
}

.up-actions {
    display:flex;
    gap:16px;
    margin-top:25px;
    flex-wrap:wrap
}

.up-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50px;
    padding:15px 26px;
    color:white!important;
    text-decoration:none!important;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:transform .3s,filter .3s
}

.up-btn:hover {
    transform:translateY(-5px);
    filter:brightness(1.1)
}

.up-gold {
    background:var(--up-gold)
}

.up-green {
    background:var(--up-green)
}

.up-impact {
    display:flex;
    flex-direction:column;
    margin-top:52px;
    gap:10px
}

.up-impact strong {
    font-size:52px;
    line-height:1
}

.up-impact small {
    font-size:14px
}

.up-hero-side {
    position:absolute;
    right:35px;
    top:30px;
    bottom:30px;
    pointer-events:none
}

.up-heart {
    color:var(--up-gold);
    font-size:125px;
    text-align:right
}

.up-raised {
    position:absolute;
    bottom:0;
    right:0;
    width:235px;
    padding:18px;
    background:#343a3b;
    border-radius:16px
}

.up-raised p {
    font-size:12px;
    margin:8px 0 0
}

.up-dots {
    position:absolute;
    left:28px;
    top:42%;
    display:grid;
    gap:17px
}

.up-dots button {
    height:9px;
    width:9px;
    border:1px solid #ddd;
    background:transparent;
    border-radius:50%;
    padding:0;
    cursor:pointer
}

.up-dots button.active {
    background:var(--up-gold);
    box-shadow:0 0 0 7px #ffa90044;
    border:0
}

.up-hero-inner.up-animate>* {
    animation:upIn .7s both
}

.up-hero-inner.up-animate>*:nth-child(2) {
    animation-delay:.12s
}

.up-hero-inner.up-animate>*:nth-child(3) {
    animation-delay:.23s
}

.up-hero-inner.up-animate>*:nth-child(4) {
    animation-delay:.33s
}

@keyframes upIn {
    from {
        opacity:0;
        transform:translateY(30px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}

.up-feature-row {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    background:#f7f7f7;
    margin:0 14px;
    padding:50px 8%;
    border-radius:0 0 30px 30px
}

.up-feature-row>div {
    display:flex;
    gap:18px;
    align-items:center;
    color:var(--up-gold);
    font-size:37px
}

.up-feature-row span {
    display:grid;
    gap:6px;
    color:#171717;
    font-size:15px
}

.up-feature-row small {
    font-size:12px;
    color:#777
}

.up-section {
    padding:100px max(5%,35px);
    max-width:1500px;
    margin:auto
}

.up-section h2,.up-contact h2 {
    font-size:clamp(30px,3.2vw,51px);
    line-height:1.18;
    letter-spacing:-1px;
    margin:0 0 22px;
    color:#161616
}

.up-section p {
    line-height:1.8
}

.up-about-head {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:65px;
    margin-bottom:45px
}

.up-about-head h3 {
    font-size:22px
}

.up-about-head p,.up-about-copy p {
    color:#666
}

.up-about-body {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:65px;
    align-items:center
}

.up-about-photo {
    position:relative
}

.up-about-photo img {
    width:100%;
    height:480px;
    object-fit:cover;
    border-radius:25px
}

.up-about-overlay {
    position:absolute;
    bottom:0;
    right:0;
    background:var(--up-green);
    padding:28px;
    border:12px solid white;
    border-radius:28px;
    color:#fff;
    font-size:25px;
    font-weight:800
}

.up-about-overlay a {
    display:block;
    color:white;
    font-size:14px;
    margin-top:15px
}

.up-service-line {
    display:flex;
    gap:20px;
    margin:20px 0 35px
}

.up-service-line>span {
    background:var(--up-green);
    color:white;
    padding:13px;
    border-radius:15px;
    font-size:30px;
    align-self:start
}

.up-service-line h3 {
    font-size:23px;
    margin:0
}

.up-services {
    margin:30px 14px 120px;
    position:relative;
    padding:95px 6% 0;
    text-align:center;
    isolation:isolate
}

.up-services-back {
    position:absolute;
    inset:0 0 140px;
    background:linear-gradient(#003c31b9,#002a23d9),url('https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=1800&q=85') center/cover;
    border-radius:28px;
    z-index:-1
}

.up-services-title h2 {
    color:white;
    font-size:40px;
    margin-bottom:48px
}

.up-service-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1050px;
    margin:auto
}

.up-service-cards a {
    background:white;
    border-radius:25px;
    padding:35px 30px;
    box-shadow:0 15px 35px #0001;
    text-decoration:none;
    color:#222;
    transition:transform .3s
}

.up-service-cards a:hover {
    transform:translateY(-12px)
}

.up-service-cards span {
    display:inline-grid;
    place-items:center;
    background:var(--up-green);
    color:white;
    border-radius:50%;
    width:68px;
    height:68px;
    font-size:32px
}

.up-service-cards h3 {
    margin:20px 0 12px
}

.up-service-cards p {
    font-size:13px;
    color:#777
}

.up-service-cards b {
    color:var(--up-green);
    font-size:13px
}

.up-mission {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center
}

.up-mission-photos {
    display:grid;
    gap:15px
}

.up-mission-photos img {
    width:100%;
    object-fit:cover;
    border-radius:28px
}

.up-mission-photos img:first-child {
    height:420px
}

.up-mission-photos img:last-child {
    height:180px;
    width:65%;
    justify-self:end;
    filter:grayscale(1)
}

.up-mission-copy>p {
    color:#666
}

.up-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:24px 0
}

.up-tabs button,.up-amounts button {
    border:1px solid #ddd;
    background:white;
    padding:12px 20px;
    border-radius:35px;
    cursor:pointer
}

.up-tabs button.active,.up-amounts button.active {
    background:var(--up-green);
    color:white
}

.up-tab-content {
    border-top:1px solid #ddd;
    padding-top:25px;
    line-height:1.9
}

.up-partners {
    display:flex;
    justify-content:space-around;
    padding:40px 7%;
    color:#9b9b9b;
    font-size:52px
}

.up-volunteer {
    margin:20px 14px 80px;
    border-radius:30px;
    min-height:360px;
    background:linear-gradient(90deg,#001b17e8,#074c41c7),url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&q=85') center/cover;
    display:grid;
    grid-template-columns:1fr 180px 1fr;
    align-items:center;
    gap:35px;
    padding:50px 6%;
    color:white;
    text-align:center
}

.up-volunteer h2 {
    color:white
}

.up-volunteer p {
    font-size:14px
}

.up-volunteer>div>span {
    font-size:45px
}

.up-play {
    width:95px;
    height:95px;
    border:10px solid #ffa90077;
    border-radius:50%;
    background:white;
    color:var(--up-gold);
    font-size:32px;
    cursor:pointer;
    margin:auto
}

.up-center {
    text-align:center;
    margin-bottom:55px
}

.up-center h2 {
    margin:0
}

.up-stat-band {
    background:var(--up-green);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:65px 8%;
    color:white;
    text-align:center
}

.up-stat-band>div {
    display:grid;
    gap:8px;
    border-right:1px solid #ffffff88
}

.up-stat-band>div:last-child {
    border:0
}

.up-stat-band strong {
    font-size:42px
}

.up-stat-band small {
    font-size:13px
}

.up-testimonial-grid {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:60px;
    max-width:950px;
    margin:auto;
    align-items:center
}

.up-avatars {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px
}

.up-avatars img {
    width:130px;
    height:80px;
    object-fit:cover;
    border-radius:80px
}

.up-testimonial-grid blockquote {
    border:1px solid #ddd;
    border-radius:20px;
    padding:35px;
    margin:0
}

.up-testimonial-grid blockquote span {
    color:var(--up-gold)
}

.up-testimonial-grid blockquote p {
    background:#f7f7f7;
    border-radius:16px;
    padding:30px;
    font-size:18px
}

.up-testimonial-grid blockquote small {
    display:block;
    color:#888
}

.up-donation {
    margin:25px 14px 75px;
    border-radius:28px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:75px 5%;
    color:white
}

.up-donation-bg {
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,#003b2fdb,#003a2bd1),url('https://images.unsplash.com/photo-1509099836639-18ba1795216d?w=1800&q=85') center/cover
}

.up-donation-inner {
    max-width:950px;
    margin:auto
}

.up-donation h2 {
    font-size:40px;
    color:white
}

.up-donation-card {
    background:white;
    color:#222;
    border-radius:30px;
    padding:15px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center
}

.up-donation-card img {
    width:100%;
    height:350px;
    object-fit:cover;
    border-radius:20px
}

.up-donation-card h3 {
    font-size:26px
}

.up-progress {
    height:7px;
    background:#ddd;
    border-radius:8px
}

.up-progress span {
    display:block;
    width:75%;
    height:100%;
    background:var(--up-gold)
}

.up-amounts {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:24px 0
}

.up-amounts button.active {
    background:var(--up-gold)
}

.up-steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    text-align:center
}

.up-steps>div {
    padding:20px
}

.up-steps span {
    font-weight:800;
    border-top:4px solid var(--up-gold);
    padding:10px
}

.up-steps b {
    display:grid;
    place-items:center;
    width:115px;
    height:115px;
    margin:35px auto;
    border-radius:50%;
    box-shadow:0 10px 35px #0001;
    font-size:50px
}

.up-steps h3 {
    font-size:22px
}

.up-steps p {
    font-size:14px;
    color:#777
}

.up-contact {
    margin:20px 14px 90px;
    border-radius:30px;
    background:#f7f7f7;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    overflow:hidden
}

.up-contact-photo {
    background:url('../images/contact-old.png') center/cover;
    min-height:560px
}

.up-contact-form {
    padding:65px 9%
}

.up-contact-form form {
    display:grid;
    gap:20px
}

.up-contact-form input,.up-contact-form textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid #dfe2e5;
    border-radius:24px;
    padding:15px 20px;
    background:transparent;
    font:inherit
}

.up-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}

.up-contact-form button {
    justify-self:start
}

.up-reveal {
    opacity:0;
    transform:translateY(50px);
    transition:opacity .85s,transform .85s
}

.up-reveal.is-visible {
    opacity:1;
    transform:translateY(0)
}

.up-video-modal {
    position:fixed;
    inset:0;
    background:#000d;
    z-index:2000;
    display:grid;
    place-items:center
}

.up-video-modal[hidden] {
    display:none
}

.up-video-box {
    width:min(800px,90vw);
    background:#fff;
    padding:30px;
    border-radius:20px
}

.up-video-box>button {
    float:right;
    font-size:28px;
    background:transparent;
    border:0;
    cursor:pointer
}

.up-video-box iframe {
    width:100%;
    aspect-ratio:16/9;
    border:0
}

@media(max-width:950px) {
    .up-about-head,.up-about-body,.up-mission,.up-contact {
        grid-template-columns:1fr
    }
    .up-hero-inner {
        padding:90px 6% 60px 10%
    }
    .up-hero-side {
        opacity:.6
    }
    .up-services {
        padding-top:70px
    }
    .up-volunteer {
        grid-template-columns:1fr 100px 1fr
    }
    .up-section {
        padding:70px 5%
    }
}

@media(max-width:650px) {
    .up-hero {
        min-height:650px;
        margin:8px
    }
    .up-hero-inner {
        padding:70px 25px 100px
    }
    .up-hero h1 {
        font-size:38px
    }
    .up-hero-side {
        right:12px;
        opacity:.8
    }
    .up-heart {
        font-size:65px
    }
    .up-raised {
        width:180px;
        bottom:0
    }
    .up-dots {
        left:auto;
        right:20px;
        top:40%
    }
    .up-feature-row,.up-service-cards,.up-stat-band,.up-steps,.up-donation-card,.up-testimonial-grid {
        grid-template-columns:1fr
    }
    .up-feature-row {
        margin:0 8px
    }
    .up-section {
        padding:65px 22px
    }
    .up-about-photo img {
        height:350px
    }
    .up-about-overlay {
        font-size:17px;
        padding:15px
    }
    .up-services {
        margin:20px 8px 70px
    }
    .up-services-back {
        bottom:60%
    }
    .up-services-title h2,.up-donation h2 {
        font-size:30px
    }
    .up-volunteer {
        grid-template-columns:1fr;
        gap:20px;
        margin:20px 8px 70px
    }
    .up-stat-band {
        gap:30px
    }
    .up-stat-band>div {
        border:0
    }
    .up-contact {
        grid-template-columns:1fr;
        margin:20px 8px 70px
    }
    .up-contact-photo {
        min-height:280px
    }
    .up-contact-form {
        padding:35px 20px
    }
    .up-fields {
        grid-template-columns:1fr
    }
    .up-mission-photos img:first-child {
        height:300px
    }
    .up-steps {
        gap:5px
    }
}

@media(prefers-reduced-motion:reduce) {
    .up-reveal {
        opacity:1;
        transform:none;
        transition:none
    }
    .up-hero-inner.up-animate>* {
        animation:none
    }
    html {
        scroll-behavior:auto
    }
}

/* Mission tab content: readable list, responsive spacing */
.up-mission .up-tab-content h3,.up-mission .up-tab-content h4 {
    color:#176b5b;
    margin:0 0 14px;
    font-weight:700
}

.up-mission .up-tab-content h4 {
    margin-top:18px
}

.up-mission .up-tab-content p,.up-mission .up-tab-content li {
    color:#333;
    line-height:1.75
}

.up-mission .up-mission-list {
    margin:12px 0 0;
    padding-left:24px;
    list-style:disc outside
}

.up-mission .up-mission-list li {
    margin-bottom:10px
}

.up-mission .up-mission-list li::marker {
    color:#176b5b
}

.up-mission .up-tabs button:focus-visible {
    outline:3px solid #176b5b;
    outline-offset:3px
}

@media(max-width:650px) {
    .up-mission .up-mission-list {
        padding-left:20px
    }
    .up-mission .up-tabs button {
        padding:10px 14px
    }
}

/* ==============================
   VOLUNTEER VIDEO POPUP
============================== */

.up-video-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;
}

.up-video-modal.active {
    display: flex;
}

.up-video-container {
    position: relative;
    width: 100%;
    max-width: 950px;
    background: #000;
    border-radius: 16px;
}

.up-video-container video {
    display: block;
    width: 100%;
    max-height: 80vh;
    border-radius: 16px;
}

.up-video-close {
    position: absolute;
    top: -45px;
    right: 0;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;

    font-size: 28px;
    cursor: pointer;
    z-index: 10;
}

.up-video-close:hover {
    background: #ffae00;
}

body.up-video-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .up-video-container {
        max-width: 100%;
    }

    .up-video-container video {
        max-height: 70vh;
    }
}