پرش به محتوا

تست۶ - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
برچسب: واگردانی دستی
 
خط ۱: خط ۱:
<html>
<html>
<div class="positive-donation-page">
<div class="positive-donation-page">


<style>
<style>
.positive-donation-page {
    --purple: #583174;
    --purple-dark: #3f2058;
    --purple-light: #eee3f5;


     --pink: #e85b9b;
/* =========================================================
     --pink-dark: #d84788;
  POSITIVE DONATION - BAKHSHANDEH
     --pink-light: #fce8f1;
  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
========================================================= */


    --lavender: #f7f0fa;
.pd-quick{
    --lavender-2: #eee2f4;


     --text: #3d3443;
     display:grid;
    --muted: #706575;


     --white: #fff;
     grid-template-columns:
    --border: #e8dce9;
        repeat(2,1fr);


     color: var(--text);
     gap:10px;
}
}


.positive-donation-page img {
.pd-quick-card{
     display: block;
 
     max-width: 100%;
    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);
}
}


/* Hero Slider */
.pd-quick-icon{
.pd-hero {
 
     position: relative;
    width:44px;
     margin-top: 12px;
     height:44px;
     overflow: hidden;
 
     border-radius: 30px;
     border-radius:15px;
     box-shadow: var(--shadow);
 
     display:flex;
 
     align-items:center;
     justify-content:center;
 
    background:var(--purple-light);
 
    color:var(--purple);
 
    font-size:1.15rem;
 
    margin-bottom:5px;
}
}


.pd-hero-slider {
.pd-quick-card:nth-child(2)
    position: relative;
.pd-quick-icon{
    min-height: 360px;
 
     background: var(--purple);
     background:var(--pink-light);
     isolation: isolate;
 
     color:var(--pink);
}
}


.pd-hero-slides {
.pd-quick-card strong{
     position: absolute;
 
     inset: 0;
     color:var(--purple);
 
     font-size:.85rem;
}
}


.pd-hero-slide {
.pd-quick-card small{
    position: absolute;
 
     inset: 0;
     color:var(--muted);
    opacity: 0;
 
    visibility: hidden;
     font-size:.72rem;
     pointer-events: none;
    transition: opacity .45s ease;
}
}


.pd-hero-slide.is-active {
 
     opacity: 1;
/* =========================================================
     visibility: visible;
  START
     pointer-events: auto;
========================================================= */
 
.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-hero-slide > img {
.pd-start h2{
    position: absolute;
 
     inset:;
     margin:0;
    object-position: center 100%;
 
     height: 100%;
     color:var(--purple);
    object-fit: cover;
 
     object-position: center;
     font-size:1.25rem;
}
}


.pd-hero-overlay {
.pd-start p{
     position: absolute;
 
    inset: 0;
     margin:6px auto 15px;
     background: linear-gradient(
 
        90deg,
     color:var(--muted);
        rgba(63,32,88,.9),
 
        rgba(88,49,116,.62),
    font-size:.82rem;
        rgba(232,91,155,.18)
 
    );
     max-width:650px;
     z-index: 1;
}
}


.pd-hero-slider .pd-hero-content {
.pd-start-options{
     position: relative;
 
     z-index: 2;
     display:grid;
    min-height: 360px;
 
    padding: 30px 24px 46px;
     grid-template-columns:
    display: flex;
        repeat(2,1fr);
    flex-direction: column;
 
    justify-content: flex-end;
     gap:9px;
     align-items: flex-start;
}
}


.pd-hero-badge {
.pd-start-option{
     display: inline-flex;
 
     background: rgba(255,255,;
     padding:13px 8px;
     border-radius: 30px;
 
    background: rgba(255,255,255,.15);
     background:#fff;
     border: 1px solid rgba(255,255,255,.4);
 
     color: #fff;
     border:
     font-size: .78rem;
        1px solid
     margin-bottom: 9px;
        var(--border);
 
     border-radius:18px;
 
     color:var(--purple);
 
     font-size:.76rem;
 
     font-weight:900;
}
}


.pd-hero h1 {
 
     margin: 0;
/* =========================================================
     color: #fff;
  DONATION SERVICES
     font-size: 1.8rem;
========================================================= */
     line-height: 1.65;
 
     max-width: 700px;
.pd-donation{
 
     position:relative;
 
     overflow:hidden;
 
     padding:27px 8px 22px;
 
     border-radius:34px;
 
     background:
        linear-gradient(
            180deg,
            #fff,
            #fff8fc
        );
}
}


.pd-hero h1 strong {
.pd-donation::before{
     color: #f7a9ca;
 
    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-hero p {
.pd-donation::after{
     max-width: 650px;
 
     margin: 8px 0 0;
    content:"";
     color: rgba(255,255,255,.94: .88rem;
 
.88rem;
    position:absolute;
     line-height: 2;
 
     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-buttons {
.pd-donation .pd-title,
     margin-top: 18px;
.pd-donation-grid{
    display: flex;
 
     flex-wrap: wrap;
     position:relative;
    gap: 8px;
 
     z-index:2;
}
}


.pd-btn {
.pd-donation-grid{
    min-height: 44px;
 
     display: inline-flex;
     display:grid;
    align-items: center;
 
    justify-content: center;
     grid-template-columns:1fr;
    padding: 8px 18px;
 
     border-radius: 14px;
     gap:13px;
    font-size: .78rem;
    font-weight: 900;
     text-decoration: none;
}
}


.pd-btn-main {
.pd-donation-card{
     background: #fff;
 
     color: var(--purple);
    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-btn-light {
.pd-donation-image{
     color: #fff;
 
     border: 1px solid rgba(255,255,255,.45);
     position:absolute;
     background: rgba(255,255,255,.12);
 
     inset:0;
 
     z-index:0;
}
}


.pd-hero-arrow {
.pd-donation-image img{
    position: absolute;
 
     z-index: 5;
     width:100%;
    top: 50%;
     height:100%;
    transform: translateY(-50%);
 
    width: 48px;
     object-fit:cover;
     height: 48px;
 
    border: 1px solid rgba(255,255,255,.35);
     object-position:center;
    border-radius: 50%;
    background: rgba(63,32,88,.58);
    color: #fff;
    font-size: 2rem;
     line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
     justify-content: center;
}
}


.pd-hero-prev {
.pd-donation-image::after{
     right: 14px;
 
     content:"";
 
    position:absolute;
 
    inset:0;
 
    background:
        linear-gradient(
            180deg,
            rgba(63,32,88,.02) 15%,
            rgba(63,32,88,.82) 100%
        );
}
}


.pd-hero-next {
.pd-donation-content{
     left: 14px;
 
    position:relative;
 
    z-index:2;
 
    padding:5px;
 
     color:#fff;
}
}


.pd-hero-dots {
.pd-donation-icon{
     position: absolute;
 
     z-index: 5;
     width:47px;
     bottom: 16px;
     height:47px;
     left: 50%;
 
     transform: translateX(-50%);
     border-radius:16px;
     display: flex;
 
     gap: 8px;
     background:
     direction: ltr;
        rgba(255,255,255,.93);
 
     color:var(--purple);
 
     display:flex;
 
    align-items:center;
    justify-content:center;
 
     font-size:1.2rem;
 
     margin-bottom:7px;
}
}


.pd-hero-dots button {
.pd-donation-card h3{
    width: 11px;
 
     height: 11px;
     margin:0;
    border: 1px solid rgba(255,255,255,.75);
 
     border-radius: 50%;
     font-size:1.12rem;
    background: rgba(255,255,255,.35);
 
    padding: 0;
     color:#fff;
     cursor: pointer;
}
}


.pd-hero-dots button.is-active {
.pd-donation-card p{
     width: 28px;
 
     border-radius {
     margin:5px 0 10px;
20px;
 
     background: #fff;
    color:
        rgba(255,255,255,.94);
 
     font-size:.78rem;
 
     line-height:1.9;
}
}


/* Image cards */
.pd-donation-actions{
.pd-image-slider {
 
     display: grid;
     display:flex;
    grid-template-columns: 1fr;
 
     gap: 13px;
     gap:7px;
     width: 100%;
 
     flex-wrap:wrap;
}
}


.pd-image-slide {
.pd-donation-actions a{
     width: 100%;
 
     min-width: 0;
     background:
    height: 230px;
        rgba(255,255,255,.94);
     position: relative;
 
    overflow: hidden;
     color:var(--purple);
     border-radius: 26px;
 
     background: var(--purple);
     padding:6px 10px;
     box-shadow: var(--shadow-soft);
 
     border-radius:12px;
 
     font-size:.68rem;
 
     font-weight:900;
}
}


.pd-image-slide img {
 
     width: 100%;
/* =========================================================
    height: 100%;
  RECEIVER / DONOR
     object-fit: cover;
========================================================= */
     object-position: center;
 
.pd-choice{
 
     display:grid;
 
     grid-template-columns:1fr;
 
     gap:12px;
}
}


.pd-image-slide::after {
.pd-choice-card{
     content: "";
 
     position: absolute;
    position:relative;
     inset: 0;
 
     background: linear-gradient(
    overflow:hidden;
        transparent 30%,
 
        rgba(63,32,88,.75)
    min-height:185px;
     );
 
    border-radius:27px;
 
     padding:21px;
 
     display:flex;
 
     flex-direction:column;
 
     justify-content:flex-end;
 
    box-shadow:var(--shadow);
 
     color:#fff;
}
}


.pd-image-slide span {
.pd-choice-card:first-child{
     position: absolute;
 
    z-index: 2;
     background:
    right: 16px;
        linear-gradient(
    bottom: 13px;
            135deg,
    color: #fff;
            var(--purple),
    font-size: .82rem;
            #80509c
    font-weight: 900;
        );
}
}


.pd-article-image {
.pd-choice-card:last-child{
     width: 100%;
 
    height: 230px;
     background:
    background: var(--lavender);
        linear-gradient(
            135deg,
            var(--pink),
            #ef83b1
        );
}
}


.pd-article-image img {
.pd-choice-card::before{
     width: 100%;
 
     height: 100%;
    content:"";
     object-fit: cover;
 
     object-position: center;
    position:absolute;
 
     width:150px;
     height:150px;
 
    border-radius:50%;
 
     background:
        rgba(255,255,255,.10);
 
     top:-60px;
    left:-40px;
}
}


@media (min-width: 700px) {
.pd-choice-card h3{
     .pd-hero-slider,
 
     .pd-hero-slider .pd-hero-content {
    position:relative;
         min-height: 450px;
 
    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-hero-slider .pd-hero-content {
     .pd-benefits{
         padding: 55px 70px 60px;
 
         grid-template-columns:
            repeat(3,1fr);
     }
     }


     .pd-hero h1 {
     .pd-steps{
         font-size: 2.6rem;
 
         grid-template-columns:
            repeat(4,1fr);
    }
 
    .pd-step{
 
        display:block;
 
        text-align:center;
     }
     }


     .pd-hero p {
     .pd-step-number{
         font-size: 1.08rem;
 
         margin:0 auto 8px;
     }
     }


     .pd-btn {
     .pd-articles{
         font-size: .95rem;
 
        min-height: 50px;
         grid-template-columns:
        padding: 10px 22px;
            repeat(3,1fr);
     }
     }


     .pd-image-slider {
     .pd-footer-grid{
         grid-template-columns: repeat(4, 1fr);
 
        gap: 12px;
         grid-template-columns:
            1.5fr 1fr 1fr;
     }
     }


     .pd-image-slide {
    /* حذف منوی موبایل */
         height: 260px;
 
     .pd-mobile-nav{
         display:none;
     }
     }


     .pd-article-image {
     .pd-footer{
         height: 260px;
         padding-bottom:24px;
     }
     }
}
}


@media (min-width: 1050px) {
 
     .pd-hero-slider,
/* =========================================================
     .pd-hero-slider .pd-hero-content {
  DESKTOP
         min-height: 520px;
========================================================= */
 
@media (min-width:1050px){
 
     .pd-section{
        margin-top:46px;
    }
 
     .pd-title{
        margin-bottom:26px;
    }
 
    .pd-title h2{
         font-size:1.7rem;
     }
     }


     .pd-hero-slider .pd-hero-content {
     .pd-title p{
         padding: 70px 85px 74px;
        font-size:.9rem;
    }
 
    .pd-hero{
 
        min-height:470px;
 
         border-radius:38px;
     }
     }


     .pd-hero h1 {
     .pd-hero-content{
         font-size: 3.05rem;
 
         min-height:470px;
 
        padding:60px;
     }
     }


     .pd-hero p {
     .pd-hero h1{
         font-size: 1.12rem;
 
         font-size:2.7rem;
     }
     }


     .pd-image-slide {
     .pd-hero p{
         height: 290px;
 
         font-size:1rem;
     }
     }


     .pd-article-image {
     .pd-donation{
         height: 275px;
 
         padding:37px 20px 30px;
 
        border-radius:40px;
     }
     }


     .pd-hero-arrow {
     .pd-donation::before{
         width: 54px;
 
         height: 54px;
         width:520px;
         height:470px;
 
        top:-155px;
        right:-120px;
     }
     }
}


@media (max-width: 480px) {
    .pd-donation::after{
    .pd-hero-slider,
 
    .pd-hero-slider .pd-hero-content {
        width:430px;
         min-height: 430px;
        height:350px;
 
        bottom:-160px;
         left:-120px;
     }
     }


     .pd-hero-slider .pd-hero-content {
     .pd-donation-card{
         padding: 28px 52px 38px;
 
        min-height:390px;
 
         border-radius:33px;
     }
     }


     .pd-hero h1 {
     .pd-donation-card h3{
         font-size: 2rem;
 
         font-size:1.2rem;
     }
     }


     .pd-hero p {
     .pd-donation-card p{
         font-size: .98rem;
 
        line-height: 2.05;
         font-size:.8rem;
     }
     }


     .pd-hero-badge {
     .pd-image-slide{
         font-size: .88rem;
 
        height:230px;
 
         border-radius:29px;
     }
     }


     .pd-btn {
     .pd-benefits{
         font-size: .88rem;
 
        padding: 9px 14px;
         grid-template-columns:
            repeat(6,1fr);
     }
     }


     .pd-hero-arrow {
     .pd-article-image{
        width: 38px;
 
         height: 38px;
         height:185px;
        font-size: 1.6rem;
     }
     }


     .pd-hero-prev {
     .pd-article-body h3{
         right: 8px;
 
         font-size:.95rem;
     }
     }
}
/* =========================================================
  HOVER
========================================================= */
@media (hover:hover){
    .pd-quick-card,
    .pd-donation-card,
    .pd-choice-card,
    .pd-benefit,
    .pd-step,
    .pd-article{


    .pd-hero-next {
        transition:
        left: 8px;
            transform .22s ease,
            box-shadow .22s ease;
     }
     }


     .pd-image-slide {
     .pd-quick-card:hover,
         height: 240px;
    .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-article-image {
     .pd-menu a:hover{
         height: 230px;
 
        background:var(--pink-light);
 
         color:var(--pink-dark);
     }
     }
}
}


@media (max-width: 390px) {
 
     .positive-donation-page {
/* =========================================================
         font-size: 17px;
  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-slider,
     .pd-hero h1{
    .pd-hero-slider .pd-hero-content {
         font-size:1.5rem;
         min-height: 400px;
     }
     }


     .pd-hero-slider .pd-hero-content {
     .pd-hero p{
         padding: 24px 46px 34px;
         font-size:.8rem;
     }
     }


     .pd-hero h1 {
     .pd-donation-card{
         font-size: 1.78rem;
         min-height:240px;
     }
     }


     .pd-hero p {
     .pd-mobile-nav{
         font-size: .9rem;
        height:64px;
    }
 
    .pd-mobile-nav a{
        min-width:49px;
         font-size:.54rem;
     }
     }
}
}


@media (prefers-reduced-motion: reduce) {
</style>
    .pd-hero-slide {
<style>
        transition: none;
/* =========================================================
    }
  ACCESSIBLE LARGE TYPE + RESPONSIVE HERO SLIDER OVERRIDES
========================================================= */
.positive-donation-page{font-size:18px;line-height:2;}
.positive-donation-page .pd-title h2{font-size:1.75rem;}
.positive-donation-page .pd-title span{font-size:1rem;padding:7px 17px;}
.positive-donation-page .pd-title p{font-size:1rem;}
.positive-donation-page .pd-brand-text strong{font-size:1.08rem;}
.positive-donation-page .pd-brand-text small{font-size:.86rem;}
.positive-donation-page .pd-quick-card strong{font-size:1rem;}
.positive-donation-page .pd-quick-card small{font-size:.86rem;}
.positive-donation-page .pd-start h2{font-size:1.5rem;}
.positive-donation-page .pd-start p{font-size:1rem;}
.positive-donation-page .pd-start-option{font-size:.95rem;}
.positive-donation-page .pd-donation-card h3{font-size:1.3rem;}
.positive-donation-page .pd-donation-card p{font-size:.95rem;}
.positive-donation-page .pd-donation-actions a{font-size:.82rem;padding:8px 12px;}
.positive-donation-page .pd-choice-card h3{font-size:1.3rem;}
.positive-donation-page .pd-choice-card p{font-size:.95rem;}
.positive-donation-page .pd-choice-card a{font-size:.82rem;}
.positive-donation-page .pd-image-slide{height:230px;}
.positive-donation-page .pd-image-slide span{font-size:1rem;}
.positive-donation-page .pd-benefit strong{font-size:.95rem;}
.positive-donation-page .pd-benefit small{font-size:.82rem;}
.positive-donation-page .pd-step strong{font-size:.95rem;}
.positive-donation-page .pd-step small{font-size:.82rem;}
.positive-donation-page .pd-article-image{height:230px;}
.positive-donation-page .pd-article-body small{font-size:.8rem;}
.positive-donation-page .pd-article-body h3{font-size:1.08rem;}
.positive-donation-page .pd-article-body p{font-size:.88rem;}
.positive-donation-page .pd-faq summary{font-size:.95rem;}
.positive-donation-page .pd-faq p{font-size:.88rem;}
.positive-donation-page .pd-cta h2{font-size:1.55rem;}
.positive-donation-page .pd-cta p{font-size:.95rem;}
.positive-donation-page .pd-footer h3{font-size:1rem;}
.positive-donation-page .pd-footer p,.positive-donation-page .pd-footer li{font-size:.82rem;}
 
.pd-hero-slider{position:relative;min-height:360px;background:var(--purple);isolation:isolate;}
.pd-hero-slides{position:absolute;inset:0;}
.pd-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease;}
.pd-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.pd-hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.pd-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(63,32,88,.9),rgba(88,49,116,.62),rgba(232,91,155,.18));z-index:1;}
.pd-hero-slider .pd-hero-content{position:relative;z-index:2;min-height:360px;padding:30px 24px;justify-content:center;align-items:flex-start;}
.pd-hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(63,32,88,.58);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pd-hero-prev{right:14px;}
.pd-hero-next{left:14px;}
.pd-hero-dots{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;direction:ltr;}
.pd-hero-dots button{width:11px;height:11px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.35);padding:0;cursor:pointer;}
.pd-hero-dots button.is-active{width:28px;border-radius:20px;background:#fff;}
 
@media (min-width:700px){
.positive-donation-page{font-size:18px;}
.positive-donation-page .pd-title h2{font-size:2rem;}
.positive-donation-page .pd-title p{font-size:1.05rem;}
.positive-donation-page .pd-menu a{font-size:.9rem;}
.positive-donation-page .pd-header-btn{font-size:.88rem;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:450px;}
.pd-hero-slider .pd-hero-content{padding:55px 70px;}
.positive-donation-page .pd-hero h1{font-size:2.6rem;}
.positive-donation-page .pd-hero p{font-size:1.08rem;}
.positive-donation-page .pd-btn{font-size:.95rem;min-height:50px;padding:10px 22px;}
.positive-donation-page .pd-image-slide{height:260px;}
.positive-donation-page .pd-article-image{height:260px;}
}
@media (min-width:1050px){
.positive-donation-page{font-size:19px;}
.positive-donation-page .pd-title h2{font-size:2.15rem;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:520px;}
.pd-hero-slider .pd-hero-content{padding:70px 85px;}
.positive-donation-page .pd-hero h1{font-size:3.05rem;}
.positive-donation-page .pd-hero p{font-size:1.12rem;}
.positive-donation-page .pd-image-slide{height:290px;}
.positive-donation-page .pd-article-image{height:275px;}
.pd-hero-arrow{width:54px;height:54px;}
}
@media (max-width:480px){
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:430px;}
.pd-hero-slider .pd-hero-content{padding:28px 52px 38px 52px;}
.positive-donation-page .pd-hero h1{font-size:2rem;}
.positive-donation-page .pd-hero p{font-size:.98rem;line-height:2.05;}
.positive-donation-page .pd-hero-badge{font-size:.88rem;}
.positive-donation-page .pd-btn{font-size:.88rem;padding:9px 14px;}
.pd-hero-arrow{width:38px;height:38px;font-size:1.6rem;}
.pd-hero-prev{right:8px;} .pd-hero-next{left:8px;}
.positive-donation-page .pd-image-slide{height:240px;}
.positive-donation-page .pd-article-image{height:230px;}
}
@media (max-width:390px){
.positive-donation-page{font-size:17px;}
.pd-hero-slider,.pd-hero-slider .pd-hero-content{min-height:400px;}
.pd-hero-slider .pd-hero-content{padding:24px 46px 34px;}
.positive-donation-page .pd-hero h1{font-size:1.78rem;}
.positive-donation-page .pd-hero p{font-size:.9rem;}
}
}
@media (prefers-reduced-motion:reduce){.pd-hero-slide{transition:none;}}
</style>
</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 pd-hero-slider" aria-label="بنرهای گروه اهدای مثبت بخشنده">
<section class="pd-hero pd-hero-slider" aria-label="بنرهای گروه اهدای مثبت بخشنده">
     <div class="pd-hero-slides">
     <div class="pd-hero-slides">
         <article class="pd-hero-slide is-active" data-slide="0">
         <article class="pd-hero-slide is-active" data-slide="0">
             <img
             <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-01.png" alt="گروه اهدای مثبت بخشنده - اهدای تخمک، اهدای جنین و رحم جایگزین" loading="eager">
                src="https://dl.faraghaib.ir/m/260009-01/baner-01-01.png"
                alt="گروه اهدای مثبت بخشنده - اهدای تخمک، اهدای جنین و رحم جایگزین"
                loading="eager"
            >
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-content">
             <div class="pd-hero-content">
                 <span class="pd-hero-badge">همراه شما در مسیر تشکیل خانواده</span>
                 <span class="pd-hero-badge">همراه شما در مسیر تشکیل خانواده</span>
                <h1><br></h1>
                <p><br></p>
                 <div class="pd-buttons">
                 <div class="pd-buttons">
                     <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات اهدا</a>
                     <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات اهدا</a>
خط ۴۴۳: خط ۲٬۱۰۱:


         <article class="pd-hero-slide" data-slide="1">
         <article class="pd-hero-slide" data-slide="1">
             <img
             <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-02.png" alt="اهدای تخمک و راهنمایی تخصصی" loading="lazy">
                src="https://dl.faraghaib.ir/m/260009-01/baner-01-02.png"
                alt="اهدای تخمک و راهنمایی تخصصی"
                loading="lazy"
            >
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-content">
             <div class="pd-hero-content">
                 <span class="pd-hero-badge">آگاهی پیش از تصمیم‌گیری</span>
                 <span class="pd-hero-badge">آگاهی پیش از تصمیم‌گیری</span>
                <h1><br><br></h1>
                <p><br></p>
                 <div class="pd-buttons">
                 <div class="pd-buttons">
                     <a href="#egg" class="pd-btn pd-btn-main">آشنایی با اهدای تخمک</a>
                     <a href="#egg" class="pd-btn pd-btn-main">آشنایی با اهدای تخمک</a>
خط ۴۵۹: خط ۲٬۱۱۵:


         <article class="pd-hero-slide" data-slide="2">
         <article class="pd-hero-slide" data-slide="2">
             <img
             <img src="https://dl.faraghaib.ir/m/260009-01/baner-01-03.png" alt="اهدای جنین و رحم جایگزین" loading="lazy">
                src="https://dl.faraghaib.ir/m/260009-01/baner-01-03.png"
                alt="اهدای جنین و رحم جایگزین"
                loading="lazy"
            >
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-overlay"></div>
             <div class="pd-hero-content">
             <div class="pd-hero-content">
                 <span class="pd-hero-badge">مسیر روشن‌تر برای خانواده</span>
                 <span class="pd-hero-badge">مسیر روشن‌تر برای خانواده</span>
                <h1><br></h1>
                <p><br></p>
                 <div class="pd-buttons">
                 <div class="pd-buttons">
                     <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات</a>
                     <a href="#donation" class="pd-btn pd-btn-main">مشاهده خدمات</a>
خط ۴۷۳: خط ۲٬۱۲۷:
             </div>
             </div>
         </article>
         </article>
     </div>
     </div>


خط ۴۸۶: خط ۲٬۱۳۹:
</section>
</section>


<script>
(function () {
  const root = document.querySelector('.positive-donation-page');
  if (!root) return;


  const slides = [...root.querySelectorAll('.pd-hero-slide')];
<!-- =======================================================
  const dots = [...root.querySelectorAll('.pd-hero-dots button')];
    QUICK SERVICES
  const prev = root.querySelector('.pd-hero-prev');
======================================================= -->
  const next = root.querySelector('.pd-hero-next');
 
<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-94.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>
 
            </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="https://dl.faraghaib.ir/m/260009-01/260009-01-13.jpg"
                    alt="مشاوره اهدای تخمک"
                    loading="lazy"
                >
 
                <span>
                    مشاوره اهدای تخمک
                </span>
 
            </a>
 
 
            <a href="#" class="pd-image-slide">
 
                <img
                    src="https://dl.faraghaib.ir/m/260009-01/260009-01-11.jpg"
                    alt="اهدای جنین"
                    loading="lazy"
                >
 
                <span>
                    آشنایی با اهدای جنین
                </span>
 
            </a>
 
 
            <a href="#" class="pd-image-slide">
 
                <img
                    src="https://dl.faraghaib.ir/m/260009-01/260009-01-12.jpg"
                    alt="رحم جایگزین"
                    loading="lazy"
                >
 
                <span>
                    رحم جایگزین
                </span>
 
            </a>
 
 
            <a href="#" class="pd-image-slide">
 
                <img
                    src="https://dl.faraghaib.ir/m/260009-01/260009-01-100.jpg"
                    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="https://dl.faraghaib.ir/m/260009-01/260009-01-18.jpg"
                        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>


  if (!slides.length) return;
        مجله


  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    </a>
  let index = 0;
  let timer = null;


  function show(i) {
    index = (i + slides.length) % slides.length;


     slides.forEach((s, n) => s.classList.toggle('is-active', n === index));
     <a href="#contact">
    dots.forEach((d, n) => d.classList.toggle('is-active', n === index));
  }


  function start() {
        <span>
    clearInterval(timer);
            ☎
    if (reduceMotion) return;
        </span>
    timer = setInterval(() => show(index + 1), 5500);
  }


  function restart() {
        تماس
    clearInterval(timer);
    start();
  }


  prev && prev.addEventListener('click', () => {
    </a>
    show(index - 1);
    restart();
  });


  next && next.addEventListener('click', () => {
</nav>
    show(index + 1);
    restart();
  });


  dots.forEach((d) => {
    d.addEventListener('click', () => {
      show(Number(d.dataset.go));
      restart();
    });
  });


  root.addEventListener('mouseenter', () => clearInterval(timer));
  root.addEventListener('mouseleave', start);


<script>
(function(){
  const root=document.querySelector('.positive-donation-page');
  if(!root) return;
  const slides=[...root.querySelectorAll('.pd-hero-slide')];
  const dots=[...root.querySelectorAll('.pd-hero-dots button')];
  const prev=root.querySelector('.pd-hero-prev');
  const next=root.querySelector('.pd-hero-next');
  if(!slides.length) return;
  let index=0,timer;
  function show(i){
    index=(i+slides.length)%slides.length;
    slides.forEach((s,n)=>s.classList.toggle('is-active',n===index));
    dots.forEach((d,n)=>d.classList.toggle('is-active',n===index));
  }
  function start(){timer=setInterval(()=>show(index+1),5500);}
  function restart(){clearInterval(timer);start();}
  prev&&prev.addEventListener('click',()=>{show(index-1);restart();});
  next&&next.addEventListener('click',()=>{show(index+1);restart();});
  dots.forEach(d=>d.addEventListener('click',()=>{show(Number(d.dataset.go));restart();}));
  root.addEventListener('mouseenter',()=>clearInterval(timer));
  root.addEventListener('mouseleave',start);
   start();
   start();
})();
})();
</script>
</script>
</div>


</div>
</html>
</html>

نسخهٔ کنونی تا ‏۲۵ اوت ۲۰۲۶، ساعت ۰۶:۵۹

گروه اهدای مثبت بخشنده با مدیریت آقای بخشنده درخواست مشاوره
♡ اهدای تخمک شرایط و مراحل ✦ اهدای جنین راهنمای دریافت ♧ رحم جایگزین آشنایی با مسیر ☎ مشاوره شروع گفت‌وگو

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

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

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

خدمات اهدا

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

انتخاب مسیر

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

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

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

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

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

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

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

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

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

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

مشاوره اهدای تخمک مشاوره اهدای تخمک اهدای جنین آشنایی با اهدای جنین رحم جایگزین رحم جایگزین گروه اهدای مثبت بخشنده همراهی گروه اهدای مثبت
چرا اهدای مثبت؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

گروه اهدای مثبت بخشنده با مدیریت آقای بخشنده، در زمینه راهنمایی و ارائه اطلاعات مرتبط با اهدای تخمک، اهدای جنین و رحم جایگزین فعالیت می‌کند.

ارتباط با ما

  • تلفن: شماره تماس مجموعه
  • ایمیل: ایمیل مجموعه
  • آدرس: آدرس مجموعه
© تمامی حقوق برای گروه اهدای مثبت بخشنده محفوظ است.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست۶&oldid=6904»