/* فونت فارسی سفارشی */
/* Generated by script */
@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #0d1b2a;
    color:#f0f0f0;
    line-height:1.6;
    overflow-x:hidden;
}

/* Header */
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
    background-color: rgba(0,0,0,0.4);
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(10px);
    flex-wrap:wrap;
}

.logo { font-size:1.8rem; font-weight:700; color:#fff; }

nav ul { list-style:none; display:flex; gap:25px; flex-wrap:wrap; }
nav ul li a { color:#f0f0f0; text-decoration:none; font-weight:500; padding:8px 15px; border-radius:5px; transition:all 0.3s ease; }
nav ul li a:hover { background-color:#1b4065; color:#1e90ff; }
.donate-btn { background-color:#1560bd; color:#0d1b2a; font-weight:700; padding:10px 20px; border-radius:25px; transition: all 0.3s ease; cursor:pointer; }
.donate-btn:hover { background-color:#0077b6; transform:scale(1.05); }

/* HERO SECTION */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 60px 20px;
    text-align: center;
    font-family: 'Vazirmatn', sans-serif;
    
    /* بک‌گراند ترکیبی از گرادیانت و تصویر */
    background: linear-gradient(rgba(13,27,42,0.5), rgba(13,27,42,0.5)),
                url('/images/hero-bg.jpg') center/cover no-repeat;
    overflow: hidden;
    z-index: 0;
}

/* انیمیشن گرادیانت متحرک روی Hero */
.hero::before {
    content: "";
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(-45deg, #0d1b2a, #1b2a42, #0b1626, #14293d);
    background-size: 600% 600%;
    animation: gradientMove 20s ease infinite;
    z-index: 1;
    opacity: 0.5; /* شفافیت برای ترکیب با تصویر */
}

/* متن روی Hero */
.hero h1, .hero p, .hero .cta-btn {
    position: relative;
    z-index: 2; /* بالاتر از بک‌گراند */
}

/* تیتر */
.hero h1 {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 3rem;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 1px 1px 8px rgba(0,0,0,0.5);
    animation: fadeInUp 1s ease forwards;
}

/* متن توضیحی */
.hero p {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1.4rem;
    max-width: 750px;
    margin-bottom: 25px;
    color: #e0e0e0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.3s;
}

/* دکمه CTA */
.hero .cta-btn {
    background-color: #0077B6;
    color: #00b4d8;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.6s;
    cursor: pointer;
    z-index: 2;
}
.hero .cta-btn:hover {
    background-color: #1e90ff;
    transform: scale(1.05);
}

/* Particles.js */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0; left:0;
    z-index:1;
}

/* انیمیشن های کمکی */
@keyframes fadeInUp {
    0% { opacity:0; transform: translateY(50px); }
    100% { opacity:1; transform: translateY(0); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Features Section */
.features {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    padding:50px 20px;
    background-color:#0b1626;
}

.feature-card {
    background: linear-gradient(135deg,#1b2a42,#14293d);
    padding:25px;
    border-radius:20px;
    width:250px;
    text-align:center;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    cursor:pointer;
    opacity:0;
    transform:translateY(50px);
}

.feature-card.show { opacity:1; transform:translateY(0); }

.feature-card img { width:60px; margin-bottom:15px; }
.feature-card h3 { font-size:1.3rem; margin-bottom:10px; color:#ffcc00; }
.feature-card p { font-size:1rem; color:#d0d0d0; }

/* Gallery Section */
.gallery { display:flex; flex-wrap:wrap; gap