*{box-sizing:border-box}
body {margin:0; background:#000; color:#fff; font-family:Arial,Helvetica,sans-serif}
nav.navbar{display:flex; justify-content:space-between; align-items:center; padding:14px 28px; background:#111}
.navbar .logo{font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px; z-index:1001;}
.nav-toggle {display:none; background:none; border:none; cursor:pointer; padding:0; z-index:1001;}
.nav-toggle .hamburger-bar {display:block; width:25px; height:3px; margin:5px auto; background-color:#fff; transition:all .3s ease-in-out;}
.nav-toggle.active .hamburger-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.active .hamburger-bar:nth-child(2){opacity:0;}
.nav-toggle.active .hamburger-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.nav-links{list-style:none; display:flex; gap:14px; margin:0; padding:0}
.nav-links li a{color:#fff; text-decoration:none; padding:8px 12px; border-radius:6px; transition:all .18s ease; display:inline-block}
.nav-links li a:hover{background:#b80000; color:#fff}
.donate-btn{background:#e22; padding:8px 14px; border-radius:18px; font-weight:600}
.donate-item {
    display: flex;
    align-items: center;
}
.donate-item .donate-btn {
    width: auto;
}
.main{padding:20px}
.hero-section {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.hero-text {
    flex: 1;
    min-width: 300px;
}
.hero-image {
    width: 320px;
    text-align: center;
}
.causes{padding:40px 20px; text-align:center}
.causes-grid{
    display:flex; 
    gap:18px; 
    overflow-x:auto; 
    flex-wrap:nowrap; 
    padding: 10px 0 20px 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.causes-grid::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }
.cause-card{background:#222; padding:16px; border-radius:12px; width:250px; text-align:left; box-shadow:0 6px 18px rgba(226,34,34,0.06); flex-shrink:0}
.cause-card img{width:100%; height:140px; object-fit:cover; border-radius:8px}
.cause-card h3{color:#e22; margin:10px 0 6px}
.cause-card h4{color:#bbb; margin:0 0 8px}
.submit-btn{background:#e22; color:#fff; padding:10px 14px; border:none; border-radius:8px; cursor:pointer}
.close-btn {
    color: #e22;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(226, 34, 34, 0.5);
    transition: all .18s ease;
}
.close-btn:hover {
    background: #e22;
    color: #fff;
}
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; align-items:center; justify-content:center; padding:20px}
.modal-content{background:#111; border:1px solid rgba(255,0,0,0.08); width:100%; max-width:760px; border-radius:12px; color:#fff; display:flex; flex-direction:column;}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.modal-body {
    padding: 18px;
    overflow-y: auto;
}
.donation-grid{display:grid; grid-template-columns:1fr; gap:12px}
.section{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03)}
label{display:block; font-size:13px; color:#ddd; margin-bottom:6px}
select, input[type="text"], input[type="email"], input[type="number"], textarea{width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:#0e0e0e; color:#fff}
.btn{padding:10px 16px; border-radius:10px; border:none; cursor:pointer; font-weight:600}
.btn-primary{background:#e22; color:#fff}
.btn-secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.06)}
.small{font-size:13px; color:#bbb}
.payment-instructions {
    margin-top: 10px;
    min-height: 30px;
}
@media(min-width:720px){ .donation-grid{grid-template-columns:repeat(2,1fr)} .section.full{grid-column:1/-1} }
@media(max-width:719px){
    .nav-toggle{display:block;}
    .nav-links{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:min(75vw, 300px);
        background:#111;
        flex-direction:column;
        align-items:flex-start;
        padding:80px 20px 20px;
        gap:18px;
        transition:right .3s ease-in-out;
        z-index:1000;
    }
    .nav-links.active{right:0;}
    .hero-section {
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }
    .hero-image {
        width: min(100%, 320px);
        margin: 0 auto;
    }
    .hero-text { min-width: 0; }
    .causes-grid {
        flex-direction: column;
        align-items: center;
        overflow-x: initial;
    }
    .cause-card {
        width: 100%;
        max-width: 380px;
    }
    .modal {
        align-items: flex-start;
        padding: 20px 10px;
    }
    .modal-content {
        max-height: 90vh;
    }
    .modal-header, .modal-body {
        padding: 15px;
    }
}