پرش به محتوا

تست۶ - فراغیب

از فراغیب
صفحه را خالی کرد
برچسب: خالی کردن
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>


<div class="positive-donation-page">
<style>
/* =========================================================
  POSITIVE DONATION - BAKHSHANDEH
  MOBILE FIRST
========================================================= */
.positive-donation-page{
    --purple:#583174;
    --purple-dark:#3f2058;
    --purple-light:#eee3f5;
    --pink:#e85b9b;
    --pink-dark:#d84788;
    --pink-light:#fce8f1;
    --lavender:#f7f0fa;
    --lavender-2:#eee2f4;
    --text:#3d3443;
    --muted:#706575;
    --white:#fff;
    --border:#e8dce9;
    --gold:#c9a04a;
    --shadow:0 10px 35px rgba(88,49,116,.10);
    --shadow-soft:0 6px 22px rgba(88,49,116,.08);
    direction:rtl;
    width:100%;
    max-width:1500px;
    margin:auto;
    padding:7px;
    font-family:
        IRANSans,
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;
    color:var(--text);
    font-size:16px;
    line-height:1.9;
}
.positive-donation-page *,
.positive-donation-page *::before,
.positive-donation-page *::after{
    box-sizing:border-box;
}
.positive-donation-page img{
    display:block;
    width:100%;
    max-width:100%;
}
.positive-donation-page a{
    text-decoration:none;
    color:inherit;
}
.pd-container{
    width:100%;
    max-width:1280px;
    margin:auto;
}
.pd-section{
    width:100%;
    margin-top:30px;
}
.pd-title{
    text-align:center;
    margin-bottom:20px;
}
.pd-title span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 15px;
    background:var(--pink-light);
    color:var(--pink-dark);
    border-radius:30px;
    font-size:.85rem;
    font-weight:800;
    margin-bottom:7px;
}
.pd-title h2{
    margin:0;
    color:var(--purple);
    font-size:1.45rem;
    line-height:1.65;
    font-weight:900;
}
.pd-title p{
    max-width:700px;
    margin:6px auto 0;
    color:var(--muted);
    font-size:.88rem;
    line-height:1.9;
}
/* =========================================================
  HEADER
========================================================= */
.pd-header{
    background:#fff;
    border:1px solid var(--border);
    border-radius:23px;
    padding:11px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    box-shadow:var(--shadow-soft);
}
.pd-brand{
    display:flex;
    align-items:center;
    gap:10px;
}
.pd-logo{
    width:47px;
    height:47px;
    flex:0 0 47px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            var(--purple),
            var(--pink)
        );
    color:#fff;
    font-size:1.55rem;
    font-weight:900;
}
.pd-brand-text strong{
    display:block;
    color:var(--purple);
    font-size:.95rem;
    line-height:1.5;
}
.pd-brand-text small{
    display:block;
    color:var(--muted);
    font-size:.72rem;
}
.pd-menu{
    display:none;
}
.pd-header-btn{
    display:none;
}
/* =========================================================
  HERO
========================================================= */
.pd-hero{
    position:relative;
    margin-top:12px;
    min-height:310px;
    overflow:hidden;
    border-radius:30px;
    background:
        linear-gradient(
            90deg,
            rgba(63,32,88,.88),
            rgba(88,49,116,.55),
            rgba(232,91,155,.18)
        ),
        url("YOUR-BANNER-IMAGE-URL")
        center center / cover no-repeat;
    box-shadow:var(--shadow);
}
.pd-hero::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    background:
        rgba(232,91,155,.20);
    top:-110px;
    right:-80px;
}
.pd-hero-content{
    position:relative;
    z-index:2;
    min-height:310px;
    padding:28px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}
.pd-hero-badge{
    display:inline-flex;
    padding:6px 14px;
    border-radius:30px;
    background:
        rgba(255,255,255,.15);
    border:
        1px solid
        rgba(255,255,255,.4);
    color:#fff;
    font-size:.78rem;
    margin-bottom:9px;
}
.pd-hero h1{
    margin:0;
    color:#fff;
    font-size:1.8rem;
    line-height:1.65;
    max-width:700px;
}
.pd-hero h1 strong{
    color:#f7a9ca;
}
.pd-hero p{
    max-width:650px;
    margin:8px 0 16px;
    color:
        rgba(255,255,255,.94);
    font-size:.88rem;
    line-height:2;
}
.pd-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.pd-btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:14px;
    font-size:.78rem;
    font-weight:900;
}
.pd-btn-main{
    background:#fff;
    color:var(--purple);
}
.pd-btn-light{
    color:#fff;
    border:
        1px solid
        rgba(255,255,255,.45);
    background:
        rgba(255,255,255,.12);
}
/* =========================================================
  QUICK SERVICES
========================================================= */
.pd-quick{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:10px;
}
.pd-quick-card{
    min-height:115px;
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:21px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:11px;
    box-shadow:var(--shadow-soft);
}
.pd-quick-icon{
    width:44px;
    height:44px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--purple-light);
    color:var(--purple);
    font-size:1.15rem;
    margin-bottom:5px;
}
.pd-quick-card:nth-child(2)
.pd-quick-icon{
    background:var(--pink-light);
    color:var(--pink);
}
.pd-quick-card strong{
    color:var(--purple);
    font-size:.85rem;
}
.pd-quick-card small{
    color:var(--muted);
    font-size:.72rem;
}
/* =========================================================
  START
========================================================= */
.pd-start{
    padding:23px 16px;
    background:
        linear-gradient(
            135deg,
            #fff,
            var(--lavender)
        );
    border:
        1px solid
        var(--border);
    border-radius:27px;
    box-shadow:var(--shadow-soft);
    text-align:center;
}
.pd-start h2{
    margin:0;
    color:var(--purple);
    font-size:1.25rem;
}
.pd-start p{
    margin:6px auto 15px;
    color:var(--muted);
    font-size:.82rem;
    max-width:650px;
}
.pd-start-options{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:9px;
}
.pd-start-option{
    padding:13px 8px;
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:18px;
    color:var(--purple);
    font-size:.76rem;
    font-weight:900;
}
/* =========================================================
  DONATION SERVICES
========================================================= */
.pd-donation{
    position:relative;
    overflow:hidden;
    padding:27px 8px 22px;
    border-radius:34px;
    background:
        linear-gradient(
            180deg,
            #fff,
            #fff8fc
        );
}
.pd-donation::before{
    content:"";
    position:absolute;
    width:390px;
    height:390px;
    border-radius:
        48% 52% 62% 38% /
        42% 39% 61% 58%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(232,91,155,.30),
            rgba(232,91,155,.11) 45%,
            transparent 70%
        );
    top:-110px;
    right:-100px;
    transform:rotate(-15deg);
    pointer-events:none;
}
.pd-donation::after{
    content:"";
    position:absolute;
    width:320px;
    height:280px;
    border-radius:
        60% 40% 42% 58% /
        55% 45% 55% 45%;
    background:
        rgba(88,49,116,.09);
    bottom:-125px;
    left:-90px;
    transform:rotate(15deg);
    pointer-events:none;
}
.pd-donation .pd-title,
.pd-donation-grid{
    position:relative;
    z-index:2;
}
.pd-donation-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
}
.pd-donation-card{
    position:relative;
    min-height:270px;
    overflow:hidden;
    background:#fff;
    border:
        1px solid
        rgba(232,91,155,.22);
    border-radius:29px;
    box-shadow:
        0 12px 30px
        rgba(88,49,116,.11);
    padding:15px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}
.pd-donation-image{
    position:absolute;
    inset:0;
    z-index:0;
}
.pd-donation-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.pd-donation-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(63,32,88,.02) 15%,
            rgba(63,32,88,.82) 100%
        );
}
.pd-donation-content{
    position:relative;
    z-index:2;
    padding:5px;
    color:#fff;
}
.pd-donation-icon{
    width:47px;
    height:47px;
    border-radius:16px;
    background:
        rgba(255,255,255,.93);
    color:var(--purple);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    margin-bottom:7px;
}
.pd-donation-card h3{
    margin:0;
    font-size:1.12rem;
    color:#fff;
}
.pd-donation-card p{
    margin:5px 0 10px;
    color:
        rgba(255,255,255,.94);
    font-size:.78rem;
    line-height:1.9;
}
.pd-donation-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.pd-donation-actions a{
    background:
        rgba(255,255,255,.94);
    color:var(--purple);
    padding:6px 10px;
    border-radius:12px;
    font-size:.68rem;
    font-weight:900;
}
/* =========================================================
  RECEIVER / DONOR
========================================================= */
.pd-choice{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
.pd-choice-card{
    position:relative;
    overflow:hidden;
    min-height:185px;
    border-radius:27px;
    padding:21px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    box-shadow:var(--shadow);
    color:#fff;
}
.pd-choice-card:first-child{
    background:
        linear-gradient(
            135deg,
            var(--purple),
            #80509c
        );
}
.pd-choice-card:last-child{
    background:
        linear-gradient(
            135deg,
            var(--pink),
            #ef83b1
        );
}
.pd-choice-card::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:
        rgba(255,255,255,.10);
    top:-60px;
    left:-40px;
}
.pd-choice-card h3{
    position:relative;
    margin:0;
    font-size:1.12rem;
}
.pd-choice-card p{
    position:relative;
    margin:5px 0 11px;
    font-size:.78rem;
    color:
        rgba(255,255,255,.93);
}
.pd-choice-card a{
    position:relative;
    width:max-content;
    padding:7px 12px;
    border-radius:13px;
    background:#fff;
    color:var(--purple);
    font-size:.68rem;
    font-weight:900;
}
/* =========================================================
  همراهی و آگاهی
  MOBILE = VERTICAL
========================================================= */
.pd-image-slider{
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    width:100%;
}
.pd-image-slide{
    width:100%;
    min-width:0;
    height:190px;
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background:var(--purple);
    box-shadow:var(--shadow-soft);
}
.pd-image-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.pd-image-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            transparent 30%,
            rgba(63,32,88,.75)
        );
}
.pd-image-slide span{
    position:absolute;
    z-index:2;
    right:16px;
    bottom:13px;
    color:#fff;
    font-size:.82rem;
    font-weight:900;
}
/* =========================================================
  BENEFITS
========================================================= */
.pd-benefits{
    display:grid;
    grid-template-columns:
        repeat(2,1fr);
    gap:10px;
}
.pd-benefit{
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:22px;
    padding:16px 9px;
    text-align:center;
    box-shadow:var(--shadow-soft);
}
.pd-benefit-icon{
    width:44px;
    height:44px;
    margin:0 auto 7px;
    border-radius:15px;
    background:var(--purple-light);
    color:var(--purple);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}
.pd-benefit:nth-child(even)
.pd-benefit-icon{
    background:var(--pink-light);
    color:var(--pink);
}
.pd-benefit strong{
    display:block;
    color:var(--purple);
    font-size:.8rem;
}
.pd-benefit small{
    color:var(--muted);
    font-size:.68rem;
}
/* =========================================================
  STEPS
========================================================= */
.pd-steps{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
}
.pd-step{
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:21px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:var(--shadow-soft);
}
.pd-step-number{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:15px;
    background:var(--purple);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:.9rem;
}
.pd-step:nth-child(2)
.pd-step-number{
    background:var(--pink);
}
.pd-step:nth-child(3)
.pd-step-number{
    background:#9b70b3;
}
.pd-step:nth-child(4)
.pd-step-number{
    background:var(--gold);
}
.pd-step strong{
    display:block;
    color:var(--purple);
    font-size:.8rem;
}
.pd-step small{
    color:var(--muted);
    font-size:.68rem;
}
/* =========================================================
  مجله اهدای مثبت
  MOBILE = VERTICAL
========================================================= */
.pd-articles{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    width:100%;
}
.pd-article{
    width:100%;
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:26px;
    box-shadow:var(--shadow-soft);
}
.pd-article-image{
    width:100%;
    height:180px;
    background:var(--lavender);
}
.pd-article-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.pd-article-body{
    padding:15px;
}
.pd-article-body small{
    color:var(--pink-dark);
    font-size:.68rem;
    font-weight:900;
}
.pd-article-body h3{
    margin:5px 0;
    color:var(--purple);
    font-size:.9rem;
    line-height:1.8;
}
.pd-article-body p{
    margin:0;
    color:var(--muted);
    font-size:.7rem;
    line-height:1.9;
}
/* =========================================================
  FAQ
========================================================= */
.pd-faq{
    display:grid;
    gap:9px;
}
.pd-faq details{
    background:#fff;
    border:
        1px solid
        var(--border);
    border-radius:19px;
    padding:13px 15px;
    box-shadow:var(--shadow-soft);
}
.pd-faq summary{
    cursor:pointer;
    color:var(--purple);
    font-size:.78rem;
    font-weight:900;
}
.pd-faq p{
    color:var(--muted);
    font-size:.72rem;
    line-height:2;
    margin:9px 0 0;
}
/* =========================================================
  CTA
========================================================= */
.pd-cta{
    position:relative;
    overflow:hidden;
    padding:32px 18px;
    border-radius:31px;
    text-align:center;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(232,91,155,.34),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );
    box-shadow:var(--shadow);
}
.pd-cta::before{
    content:"♥";
    position:absolute;
    font-size:160px;
    color:
        rgba(255,255,255,.04);
    left:-10px;
    bottom:-65px;
}
.pd-cta h2{
    position:relative;
    margin:0 0 6px;
    color:#fff;
    font-size:1.35rem;
}
.pd-cta p{
    position:relative;
    max-width:650px;
    margin:0 auto 15px;
    color:
        rgba(255,255,255,.88);
    font-size:.76rem;
    line-height:2;
}
.pd-cta a{
    position:relative;
    display:inline-flex;
    padding:9px 19px;
    border-radius:15px;
    background:#fff;
    color:var(--purple);
    font-size:.74rem;
    font-weight:900;
}
/* =========================================================
  FOOTER
========================================================= */
.pd-footer{
    margin-top:30px;
    padding:24px 15px;
    background:
        var(--lavender);
    border:
        1px solid
        var(--border);
    border-radius:26px;
    padding-bottom:90px;
}
.pd-footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}
.pd-footer h3{
    margin:0 0 7px;
    color:var(--purple);
    font-size:.86rem;
}
.pd-footer p,
.pd-footer li{
    color:var(--muted);
    font-size:.68rem;
    line-height:2;
}
.pd-footer ul{
    list-style:none;
    padding:0;
    margin:0;
}
.pd-footer li{
    margin:4px 0;
}
.pd-footer-bottom{
    margin-top:17px;
    padding-top:13px;
    border-top:
        1px solid
        var(--border);
    text-align:center;
    color:var(--muted);
    font-size:.62rem;
}
/* =========================================================
  MOBILE BOTTOM NAV
========================================================= */
.pd-mobile-nav{
    position:fixed;
    z-index:99999;
    right:7px;
    left:7px;
    bottom:7px;
    height:67px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    background:
        rgba(63,32,88,.97);
    border:
        1px solid
        rgba(255,255,255,.13);
    border-radius:22px;
    box-shadow:
        0 8px 35px
        rgba(63,32,88,.28);
    direction:rtl;
}
.pd-mobile-nav a{
    min-width:55px;
    height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border-radius:16px;
    color:
        rgba(255,255,255,.76);
    font-size:.58rem;
    font-weight:800;
    transition:.2s ease;
}
.pd-mobile-nav a span{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    font-size:1rem;
}
.pd-mobile-nav a.active{
    color:#fff;
}
.pd-mobile-nav a.active span{
    background:var(--pink);
    color:#fff;
    box-shadow:
        0 5px 15px
        rgba(232,91,155,.35);
}
/* =========================================================
  TABLET
========================================================= */
@media (min-width:700px){
    .positive-donation-page{
        padding:15px;
        font-size:16px;
    }
    .pd-header{
        padding:13px 18px;
    }
    .pd-menu{
        display:flex;
        align-items:center;
        gap:3px;
        margin-right:auto;
    }
    .pd-menu a{
        padding:8px 10px;
        border-radius:12px;
        color:var(--purple);
        font-size:.72rem;
        font-weight:900;
    }
    .pd-header-btn{
        display:inline-flex;
        padding:8px 14px;
        border-radius:13px;
        background:var(--purple);
        color:#fff;
        font-size:.7rem;
        font-weight:900;
    }
    .pd-hero{
        min-height:400px;
    }
    .pd-hero-content{
        min-height:400px;
        padding:45px;
    }
    .pd-hero h1{
        font-size:2.25rem;
    }
    .pd-hero p{
        font-size:.95rem;
    }
    .pd-quick{
        grid-template-columns:
            repeat(4,1fr);
    }
    .pd-start-options{
        grid-template-columns:
            repeat(4,1fr);
    }
    .pd-donation-grid{
        grid-template-columns:
            repeat(3,1fr);
    }
    .pd-donation-card{
        min-height:320px;
    }
    .pd-choice{
        grid-template-columns:
            repeat(2,1fr);
    }
    .pd-choice-card{
        min-height:215px;
    }
    /* دسکتاپ چندستونه */
    .pd-image-slider{
        grid-template-columns:
            repeat(4,1fr);
        gap:12px;
    }
    .pd-image-slide{
        height:205px;
    }
    .pd-benefits{
        grid-template-columns:
            repeat(3,1fr);
    }
    .pd-steps{
        grid-template-columns:
            repeat(4,1fr);
    }
    .pd-step{
        display:block;
        text-align:center;
    }
    .pd-step-number{
        margin:0 auto 8px;
    }
    .pd-articles{
        grid-template-columns:
            repeat(3,1fr);
    }
    .pd-footer-grid{
        grid-template-columns:
            1.5fr 1fr 1fr;
    }
    /* حذف منوی موبایل */
    .pd-mobile-nav{
        display:none;
    }
    .pd-footer{
        padding-bottom:24px;
    }
}
/* =========================================================
  DESKTOP
========================================================= */
@media (min-width:1050px){
    .pd-section{
        margin-top:46px;
    }
    .pd-title{
        margin-bottom:26px;
    }
    .pd-title h2{
        font-size:1.7rem;
    }
    .pd-title p{
        font-size:.9rem;
    }
    .pd-hero{
        min-height:470px;
        border-radius:38px;
    }
    .pd-hero-content{
        min-height:470px;
        padding:60px;
    }
    .pd-hero h1{
        font-size:2.7rem;
    }
    .pd-hero p{
        font-size:1rem;
    }
    .pd-donation{
        padding:37px 20px 30px;
        border-radius:40px;
    }
    .pd-donation::before{
        width:520px;
        height:470px;
        top:-155px;
        right:-120px;
    }
    .pd-donation::after{
        width:430px;
        height:350px;
        bottom:-160px;
        left:-120px;
    }
    .pd-donation-card{
        min-height:390px;
        border-radius:33px;
    }
    .pd-donation-card h3{
        font-size:1.2rem;
    }
    .pd-donation-card p{
        font-size:.8rem;
    }
    .pd-image-slide{
        height:230px;
        border-radius:29px;
    }
    .pd-benefits{
        grid-template-columns:
            repeat(6,1fr);
    }
    .pd-article-image{
        height:185px;
    }
    .pd-article-body h3{
        font-size:.95rem;
    }
}
/* =========================================================
  HOVER
========================================================= */
@media (hover:hover){
    .pd-quick-card,
    .pd-donation-card,
    .pd-choice-card,
    .pd-benefit,
    .pd-step,
    .pd-article{
        transition:
            transform .22s ease,
            box-shadow .22s ease;
    }
    .pd-quick-card:hover,
    .pd-donation-card:hover,
    .pd-choice-card:hover,
    .pd-benefit:hover,
    .pd-step:hover,
    .pd-article:hover{
        transform:translateY(-4px);
        box-shadow:
            0 18px 38px
            rgba(88,49,116,.15);
    }
    .pd-menu a:hover{
        background:var(--pink-light);
        color:var(--pink-dark);
    }
}
/* =========================================================
  VERY SMALL MOBILE
========================================================= */
@media (max-width:390px){
    .positive-donation-page{
        padding:6px;
    }
    .pd-brand-text strong{
        font-size:.84rem;
    }
    .pd-brand-text small{
        font-size:.65rem;
    }
    .pd-hero{
        min-height:285px;
    }
    .pd-hero-content{
        min-height:285px;
        padding:23px 16px;
    }
    .pd-hero h1{
        font-size:1.5rem;
    }
    .pd-hero p{
        font-size:.8rem;
    }
    .pd-donation-card{
        min-height:240px;
    }
    .pd-mobile-nav{
        height:64px;
    }
    .pd-mobile-nav a{
        min-width:49px;
        font-size:.54rem;
    }
}
</style>
<!-- =======================================================
    HEADER
======================================================= -->
<header class="pd-header">
    <a href="#" class="pd-brand">
        <span class="pd-logo">
            +
        </span>
        <span class="pd-brand-text">
            <strong>
                گروه اهدای مثبت بخشنده
            </strong>
            <small>
                با مدیریت آقای بخشنده
            </small>
        </span>
    </a>
    <nav class="pd-menu">
        <a href="#donation">
            خدمات اهدا
        </a>
        <a href="#choice">
            مسیر خدمات
        </a>
        <a href="#about">
            درباره ما
        </a>
        <a href="#articles">
            مجله
        </a>
        <a href="#faq">
            سوالات متداول
        </a>
    </nav>
    <a href="#contact"
      class="pd-header-btn">
        درخواست مشاوره
    </a>
</header>
<!-- =======================================================
    HERO
======================================================= -->
<section class="pd-hero">
    <div class="pd-hero-content">
        <span class="pd-hero-badge">
            همراه شما در مسیر تشکیل خانواده
        </span>
        <h1>
            گروه
            <strong>
                اهدای مثبت بخشنده
            </strong>
        </h1>
        <p>
            همراهی و راهنمایی در مسیر
            اهدای تخمک، اهدای جنین و رحم جایگزین
            با تأکید بر آگاهی، احترام و حفظ حریم خصوصی.
        </p>
        <div class="pd-buttons">
            <a href="#donation"
              class="pd-btn pd-btn-main">
                مشاهده خدمات اهدا
            </a>
            <a href="#contact"
              class="pd-btn pd-btn-light">
                دریافت مشاوره
            </a>
        </div>
    </div>
</section>
<!-- =======================================================
    QUICK SERVICES
======================================================= -->
<section class="pd-section">
    <div class="pd-container">
        <div class="pd-quick">
            <a href="#egg"
              class="pd-quick-card">
                <span class="pd-quick-icon">
                    ♡
                </span>
                <strong>
                    اهدای تخمک
                </strong>
                <small>
                    شرایط و مراحل
                </small>
            </a>
            <a href="#embryo"
              class="pd-quick-card">
                <span class="pd-quick-icon">
                    ✦
                </span>
                <strong>
                    اهدای جنین
                </strong>
                <small>
                    راهنمای دریافت
                </small>
            </a>
            <a href="#surrogacy"
              class="pd-quick-card">
                <span class="pd-quick-icon">
                    ♧
                </span>
                <strong>
                    رحم جایگزین
                </strong>
                <small>
                    آشنایی با مسیر
                </small>
            </a>
            <a href="#contact"
              class="pd-quick-card">
                <span class="pd-quick-icon">
                    ☎
                </span>
                <strong>
                    مشاوره
                </strong>
                <small>
                    شروع گفت‌وگو
                </small>
            </a>
        </div>
    </div>
</section>
<!-- =======================================================
    START
======================================================= -->
<section class="pd-section">
    <div class="pd-container">
        <div class="pd-start">
            <h2>
                از کدام مسیر می‌خواهید شروع کنید؟
            </h2>
            <p>
                مسیر مناسب خود را انتخاب کنید تا اطلاعات
                موردنیاز را ساده‌تر پیدا کنید.
            </p>
            <div class="pd-start-options">
                <a href="#choice"
                  class="pd-start-option">
                    من گیرنده هستم
                </a>
                <a href="#choice"
                  class="pd-start-option">
                    من اهداکننده هستم
                </a>
                <a href="#articles"
                  class="pd-start-option">
                    می‌خواهم بیشتر بدانم
                </a>
                <a href="#contact"
                  class="pd-start-option">
                    مشاوره می‌خواهم
                </a>
            </div>
        </div>
    </div>
</section>
<!-- =======================================================
    DONATION SERVICES
======================================================= -->
<section class="pd-section"
        id="donation">
    <div class="pd-container">
        <div class="pd-donation">
            <div class="pd-title">
                <span>
                    خدمات اهدای مثبت
                </span>
                <h2>
                    خدمات اهدا
                </h2>
                <p>
                    اطلاعات و راهنمایی برای اهدای تخمک،
                    اهدای جنین و رحم جایگزین
                </p>
            </div>
            <div class="pd-donation-grid">
                <article class="pd-donation-card"
                        id="egg">
                    <div class="pd-donation-image">
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-15.jpg"
                            alt="اهدای تخمک"
                            loading="lazy"
                        >
                    </div>
                    <div class="pd-donation-content">
                        <div class="pd-donation-icon">
                            ♡
                        </div>
                        <h3>
                            اهدای تخمک
                        </h3>
                        <p>
                            آشنایی با شرایط اهدای تخمک،
                            مراحل دریافت و نکات مهم پیش از تصمیم‌گیری.
                        </p>
                        <div class="pd-donation-actions">
                            <a href="#">
                                من گیرنده هستم
                            </a>
                            <a href="#">
                                من اهداکننده هستم
                            </a>
                        </div>
                    </div>
                </article>
                <article class="pd-donation-card"
                        id="embryo">
                    <div class="pd-donation-image">
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-36.png"
                            alt="اهدای جنین"
                            loading="lazy"
                        >
                    </div>
                    <div class="pd-donation-content">
                        <div class="pd-donation-icon">
                            ✦
                        </div>
                        <h3>
                            اهدای جنین
                        </h3>
                        <p>
                            آشنایی با مفهوم اهدای جنین،
                            شرایط دریافت و مراحل این مسیر.
                        </p>
                        <div class="pd-donation-actions">
                            <a href="#">
                                شرایط دریافت
                            </a>
                            <a href="#">
                                مشاوره
                            </a>
                        </div>
                    </div>
                </article>
                <article class="pd-donation-card"
                        id="surrogacy">
                    <div class="pd-donation-image">
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-63.png"
                            alt="رحم جایگزین"
                            loading="lazy"
                        >
                    </div>
                    <div class="pd-donation-content">
                        <div class="pd-donation-icon">
                            ♧
                        </div>
                        <h3>
                            رحم جایگزین
                        </h3>
                        <p>
                            آشنایی با مفهوم رحم جایگزین،
                            شرایط و مراحل این مسیر.
                        </p>
                        <div class="pd-donation-actions">
                            <a href="#">
                                آشنایی بیشتر
                            </a>
                            <a href="#">
                                مشاوره
                            </a>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
<!-- =======================================================
    RECEIVER / DONOR
======================================================= -->
<section class="pd-section"
        id="choice">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                انتخاب مسیر
            </span>
            <h2>
                شما در کدام گروه قرار می‌گیرید؟
            </h2>
            <p>
                برای دریافت اطلاعات متناسب با شرایط خود،
                یکی از مسیرهای زیر را انتخاب کنید.
            </p>
        </div>
        <div class="pd-choice">
            <div class="pd-choice-card">
                <h3>
                    من گیرنده هستم
                </h3>
                <p>
                    برای آشنایی با خدمات و مسیر دریافت
                    خدمات اهدا.
                </p>
                <a href="#">
                    مشاهده راهنمای گیرندگان
                </a>
            </div>
            <div class="pd-choice-card">
                <h3>
                    من اهداکننده هستم
                </h3>
                <p>
                    برای آشنایی با شرایط و مراحل
                    اهدای تخمک، جنین یا سایر خدمات.
                </p>
                <a href="#">
                    مشاهده راهنمای اهداکنندگان
                </a>
            </div>
        </div>
    </div>
</section>
<!-- =======================================================
    همراهی و آگاهی
    MOBILE VERTICAL
======================================================= -->
<section class="pd-section">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                همراهی و آگاهی
            </span>
            <h2>
                مسیر آگاهانه، تصمیم مطمئن‌تر
            </h2>
            <p>
                اطلاعات درست و همراهی مناسب می‌تواند
                مسیر تصمیم‌گیری را روشن‌تر کند.
            </p>
        </div>
        <div class="pd-image-slider">
            <a href="#" class="pd-image-slide">
                <img
                    src="IMAGE-SLIDE-1"
                    alt="مشاوره اهدای تخمک"
                    loading="lazy"
                >
                <span>
                    مشاوره اهدای تخمک
                </span>
            </a>
            <a href="#" class="pd-image-slide">
                <img
                    src="IMAGE-SLIDE-2"
                    alt="اهدای جنین"
                    loading="lazy"
                >
                <span>
                    آشنایی با اهدای جنین
                </span>
            </a>
            <a href="#" class="pd-image-slide">
                <img
                    src="IMAGE-SLIDE-3"
                    alt="رحم جایگزین"
                    loading="lazy"
                >
                <span>
                    رحم جایگزین
                </span>
            </a>
            <a href="#" class="pd-image-slide">
                <img
                    src="IMAGE-SLIDE-4"
                    alt="گروه اهدای مثبت بخشنده"
                    loading="lazy"
                >
                <span>
                    همراهی گروه اهدای مثبت
                </span>
            </a>
        </div>
    </div>
</section>
<!-- =======================================================
    BENEFITS
======================================================= -->
<section class="pd-section"
        id="about">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                چرا اهدای مثبت؟
            </span>
            <h2>
                همراهی با احترام و حفظ حریم خصوصی
            </h2>
            <p>
                هدف گروه اهدای مثبت بخشنده،
                ایجاد مسیری روشن و آگاهانه برای مراجعین است.
            </p>
        </div>
        <div class="pd-benefits">
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    ✓
                </div>
                <strong>
                    مشاوره
                </strong>
                <small>
                    راهنمایی پیش از تصمیم
                </small>
            </div>
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    🔒
                </div>
                <strong>
                    محرمانگی
                </strong>
                <small>
                    احترام به حریم خصوصی
                </small>
            </div>
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    ♡
                </div>
                <strong>
                    همراهی
                </strong>
                <small>
                    در طول مسیر
                </small>
            </div>
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    ✦
                </div>
                <strong>
                    آگاهی
                </strong>
                <small>
                    اطلاعات قابل فهم
                </small>
            </div>
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    ☎
                </div>
                <strong>
                    پاسخگویی
                </strong>
                <small>
                    ارتباط و راهنمایی
                </small>
            </div>
            <div class="pd-benefit">
                <div class="pd-benefit-icon">
                    +
                </div>
                <strong>
                    مسیر روشن
                </strong>
                <small>
                    مرحله به مرحله
                </small>
            </div>
        </div>
    </div>
</section>
<!-- =======================================================
    STEPS
======================================================= -->
<section class="pd-section">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                چگونه شروع کنیم؟
            </span>
            <h2>
                مسیر دریافت خدمات
            </h2>
        </div>
        <div class="pd-steps">
            <div class="pd-step">
                <div class="pd-step-number">
                    ۱
                </div>
                <div>
                    <strong>
                        مشاوره اولیه
                    </strong>
                    <small>
                        بررسی نیاز و شرایط
                    </small>
                </div>
            </div>
            <div class="pd-step">
                <div class="pd-step-number">
                    ۲
                </div>
                <div>
                    <strong>
                        بررسی شرایط
                    </strong>
                    <small>
                        شناخت مسیر مناسب
                    </small>
                </div>
            </div>
            <div class="pd-step">
                <div class="pd-step-number">
                    ۳
                </div>
                <div>
                    <strong>
                        انتخاب مسیر
                    </strong>
                    <small>
                        تصمیم‌گیری آگاهانه
                    </small>
                </div>
            </div>
            <div class="pd-step">
                <div class="pd-step-number">
                    ۴
                </div>
                <div>
                    <strong>
                        ادامه مسیر
                    </strong>
                    <small>
                        همراهی و راهنمایی
                    </small>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- =======================================================
    مجله اهدای مثبت
    MOBILE VERTICAL
======================================================= -->
<section class="pd-section"
        id="articles">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                مجله اهدای مثبت
            </span>
            <h2>
                دانستنی‌های باروری و اهدا
            </h2>
            <p>
                محتوای آموزشی کوتاه و کاربردی برای تصمیم‌گیری آگاهانه.
            </p>
        </div>
        <div class="pd-articles">
            <article class="pd-article">
                <div class="pd-article-image">
                    <img
                        src="IMAGE-ARTICLE-1"
                        alt="سن مناسب برای اهدای تخمک"
                        loading="lazy"
                    >
                </div>
                <div class="pd-article-body">
                    <small>
                        اهدای تخمک
                    </small>
                    <h3>
                        سن مناسب برای اهدای تخمک
                    </h3>
                    <p>
                        آشنایی با شرایط سنی و نکات مهم پیش از اهدا.
                    </p>
                </div>
            </article>
            <article class="pd-article">
                <div class="pd-article-image">
                    <img
                        src="IMAGE-ARTICLE-2"
                        alt="اهدای جنین چیست"
                        loading="lazy"
                    >
                </div>
                <div class="pd-article-body">
                    <small>
                        اهدای جنین
                    </small>
                    <h3>
                        اهدای جنین چیست؟
                    </h3>
                    <p>
                        آشنایی با مفهوم اهدای جنین و مسیر دریافت.
                    </p>
                </div>
            </article>
            <article class="pd-article">
                <div class="pd-article-image">
                    <img
                        src="IMAGE-ARTICLE-3"
                        alt="رحم جایگزین چیست"
                        loading="lazy"
                    >
                </div>
                <div class="pd-article-body">
                    <small>
                        رحم جایگزین
                    </small>
                    <h3>
                        رحم جایگزین چیست؟
                    </h3>
                    <p>
                        آشنایی اولیه با مفهوم و مراحل رحم جایگزین.
                    </p>
                </div>
            </article>
        </div>
    </div>
</section>
<!-- =======================================================
    FAQ
======================================================= -->
<section class="pd-section"
        id="faq">
    <div class="pd-container">
        <div class="pd-title">
            <span>
                سوالات متداول
            </span>
            <h2>
                پاسخ به سوالات شما
            </h2>
        </div>
        <div class="pd-faq">
            <details>
                <summary>
                    اهدای تخمک چیست؟
                </summary>
                <p>
                    اهدای تخمک فرایندی است که در آن تخمک
                    فرد اهداکننده برای استفاده در درمان ناباروری
                    در اختیار گیرنده قرار می‌گیرد.
                </p>
            </details>
            <details>
                <summary>
                    شرایط اهدای تخمک چیست؟
                </summary>
                <p>
                    شرایط اهدا باید بر اساس معیارهای پزشکی،
                    قانونی و ارزیابی‌های تخصصی بررسی شود.
                </p>
            </details>
            <details>
                <summary>
                    اهدای جنین چگونه انجام می‌شود؟
                </summary>
                <p>
                    شرایط و مراحل دریافت یا اهدای جنین
                    نیازمند بررسی تخصصی و طی مراحل قانونی مربوط است.
                </p>
            </details>
            <details>
                <summary>
                    رحم جایگزین چیست؟
                </summary>
                <p>
                    رحم جایگزین روشی است که در آن بارداری
                    توسط فرد دیگری برای متقاضیان انجام می‌شود
                    و جزئیات آن باید به صورت تخصصی بررسی شود.
                </p>
            </details>
            <details>
                <summary>
                    چگونه برای مشاوره اقدام کنم؟
                </summary>
                <p>
                    می‌توانید از طریق اطلاعات تماس مجموعه
                    برای دریافت راهنمایی اولیه اقدام کنید.
                </p>
            </details>
        </div>
    </div>
</section>
<!-- =======================================================
    CTA
======================================================= -->
<section class="pd-section"
        id="contact">
    <div class="pd-container">
        <div class="pd-cta">
            <h2>
                برای شروع مسیر خود تنها نیستید
            </h2>
            <p>
                برای آشنایی بیشتر با اهدای تخمک،
                اهدای جنین و رحم جایگزین با ما در ارتباط باشید.
            </p>
            <a href="#">
                درخواست مشاوره
            </a>
        </div>
    </div>
</section>
<!-- =======================================================
    FOOTER
======================================================= -->
<footer class="pd-footer">
    <div class="pd-footer-grid">
        <div>
            <h3>
                گروه اهدای مثبت بخشنده
            </h3>
            <p>
                گروه اهدای مثبت بخشنده با مدیریت آقای بخشنده،
                در زمینه راهنمایی و ارائه اطلاعات مرتبط با
                اهدای تخمک، اهدای جنین و رحم جایگزین فعالیت می‌کند.
            </p>
        </div>
        <div>
            <h3>
                خدمات
            </h3>
            <ul>
                <li>
                    <a href="#egg">
                        اهدای تخمک
                    </a>
                </li>
                <li>
                    <a href="#embryo">
                        اهدای جنین
                    </a>
                </li>
                <li>
                    <a href="#surrogacy">
                        رحم جایگزین
                    </a>
                </li>
                <li>
                    <a href="#contact">
                        مشاوره
                    </a>
                </li>
            </ul>
        </div>
        <div>
            <h3>
                ارتباط با ما
            </h3>
            <ul>
                <li>
                    تلفن: شماره تماس مجموعه
                </li>
                <li>
                    ایمیل: ایمیل مجموعه
                </li>
                <li>
                    آدرس: آدرس مجموعه
                </li>
            </ul>
        </div>
    </div>
    <div class="pd-footer-bottom">
        © تمامی حقوق برای گروه اهدای مثبت بخشنده محفوظ است.
    </div>
</footer>
<!-- =======================================================
    MOBILE BOTTOM NAV
======================================================= -->
<nav class="pd-mobile-nav"
    aria-label="منوی اصلی موبایل">
    <a href="#donation"
      class="active">
        <span>
            ♡
        </span>
        خدمات اهدا
    </a>
    <a href="#choice">
        <span>
            ◉
        </span>
        مسیر خدمات
    </a>
    <a href="#about">
        <span>
            ✦
        </span>
        درباره ما
    </a>
    <a href="#articles">
        <span>
            ▣
        </span>
        مجله
    </a>
    <a href="#contact">
        <span>
            ☎
        </span>
        تماس
    </a>
</nav>
</div>
</html>

نسخهٔ کنونی تا ‏۲۴ اوت ۲۰۲۶، ساعت ۱۳:۲۸

گروه اهدای مثبت بخشنده با مدیریت آقای بخشنده درخواست مشاوره
همراه شما در مسیر تشکیل خانواده

گروه اهدای مثبت بخشنده

همراهی و راهنمایی در مسیر اهدای تخمک، اهدای جنین و رحم جایگزین با تأکید بر آگاهی، احترام و حفظ حریم خصوصی.

از کدام مسیر می‌خواهید شروع کنید؟

مسیر مناسب خود را انتخاب کنید تا اطلاعات موردنیاز را ساده‌تر پیدا کنید.

خدمات اهدای مثبت

خدمات اهدا

اطلاعات و راهنمایی برای اهدای تخمک، اهدای جنین و رحم جایگزین

انتخاب مسیر

شما در کدام گروه قرار می‌گیرید؟

برای دریافت اطلاعات متناسب با شرایط خود، یکی از مسیرهای زیر را انتخاب کنید.

من گیرنده هستم

برای آشنایی با خدمات و مسیر دریافت خدمات اهدا.

مشاهده راهنمای گیرندگان

من اهداکننده هستم

برای آشنایی با شرایط و مراحل اهدای تخمک، جنین یا سایر خدمات.

مشاهده راهنمای اهداکنندگان
همراهی و آگاهی

مسیر آگاهانه، تصمیم مطمئن‌تر

اطلاعات درست و همراهی مناسب می‌تواند مسیر تصمیم‌گیری را روشن‌تر کند.

چرا اهدای مثبت؟

همراهی با احترام و حفظ حریم خصوصی

هدف گروه اهدای مثبت بخشنده، ایجاد مسیری روشن و آگاهانه برای مراجعین است.

مشاوره راهنمایی پیش از تصمیم
🔒
محرمانگی احترام به حریم خصوصی
همراهی در طول مسیر
آگاهی اطلاعات قابل فهم
پاسخگویی ارتباط و راهنمایی
+
مسیر روشن مرحله به مرحله
چگونه شروع کنیم؟

مسیر دریافت خدمات

۱
مشاوره اولیه بررسی نیاز و شرایط
۲
بررسی شرایط شناخت مسیر مناسب
۳
انتخاب مسیر تصمیم‌گیری آگاهانه
۴
ادامه مسیر همراهی و راهنمایی
مجله اهدای مثبت

دانستنی‌های باروری و اهدا

محتوای آموزشی کوتاه و کاربردی برای تصمیم‌گیری آگاهانه.

سن مناسب برای اهدای تخمک
اهدای تخمک

سن مناسب برای اهدای تخمک

آشنایی با شرایط سنی و نکات مهم پیش از اهدا.

اهدای جنین چیست
اهدای جنین

اهدای جنین چیست؟

آشنایی با مفهوم اهدای جنین و مسیر دریافت.

رحم جایگزین چیست
رحم جایگزین

رحم جایگزین چیست؟

آشنایی اولیه با مفهوم و مراحل رحم جایگزین.

سوالات متداول

پاسخ به سوالات شما

اهدای تخمک چیست؟

اهدای تخمک فرایندی است که در آن تخمک فرد اهداکننده برای استفاده در درمان ناباروری در اختیار گیرنده قرار می‌گیرد.

شرایط اهدای تخمک چیست؟

شرایط اهدا باید بر اساس معیارهای پزشکی، قانونی و ارزیابی‌های تخصصی بررسی شود.

اهدای جنین چگونه انجام می‌شود؟

شرایط و مراحل دریافت یا اهدای جنین نیازمند بررسی تخصصی و طی مراحل قانونی مربوط است.

رحم جایگزین چیست؟

رحم جایگزین روشی است که در آن بارداری توسط فرد دیگری برای متقاضیان انجام می‌شود و جزئیات آن باید به صورت تخصصی بررسی شود.

چگونه برای مشاوره اقدام کنم؟

می‌توانید از طریق اطلاعات تماس مجموعه برای دریافت راهنمایی اولیه اقدام کنید.

برای شروع مسیر خود تنها نیستید

برای آشنایی بیشتر با اهدای تخمک، اهدای جنین و رحم جایگزین با ما در ارتباط باشید.

درخواست مشاوره