پرش به محتوا

تست۶ - فراغیب

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <html lang="fa" dir="rtl"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <style> ←========================================================= ROOT / VARIABLES =========================================================: .wiki-store{ --ws-primary:#0b3157; --ws-primary-dark:#071f38; --ws-secondary:#238b68; --ws-secondary-dark:#176b50; --ws-gold...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۱۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>


 
<div class="positive-donation-page">
<html lang="fa" dir="rtl">
 
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">


<style>
<style>


/* =========================================================
/* =========================================================
   ROOT / VARIABLES
   POSITIVE DONATION - BAKHSHANDEH
  MOBILE FIRST
========================================================= */
========================================================= */


.wiki-store{
.positive-donation-page{
     --ws-primary:#0b3157;
 
     --ws-primary-dark:#071f38;
     --purple:#583174;
     --ws-secondary:#238b68;
    --purple-dark:#3f2058;
     --ws-secondary-dark:#176b50;
     --purple-light:#eee3f5;
     --ws-gold:#c99a2e;
 
     --ws-gold-light:#f7edcf;
    --pink:#e85b9b;
    --pink-dark:#d84788;
     --pink-light:#fce8f1;
 
     --lavender:#f7f0fa;
    --lavender-2:#eee2f4;
 
     --text:#3d3443;
    --muted:#706575;
 
     --white:#fff;
    --border:#e8dce9;


     --ws-bg:#f5f7fa;
     --gold:#c9a04a;
    --ws-card:#ffffff;
    --ws-text:#17202a;
    --ws-muted:#697586;
    --ws-border:#e7ebef;


     --ws-radius:18px;
     --shadow:0 10px 35px rgba(88,49,116,.10);
     --ws-shadow:0 8px 28px rgba(0,0,0,.07);
     --shadow-soft:0 6px 22px rgba(88,49,116,.08);


    direction:rtl;
     width:100%;
     width:100%;
     max-width:1400px;
     max-width:1500px;
     margin:0 auto;
     margin:auto;
    padding:0 10px 30px;


     direction:rtl;
     padding:7px;
    text-align:right;
    box-sizing:border-box;


     font-family:
     font-family:
         IRANSans,
         IRANSans,
         Vazirmatn,
         "Vazirmatn",
         Tahoma,
         Tahoma,
         Arial,
         Arial,
         sans-serif;
         sans-serif;
    color:var(--text);
    font-size:16px;
    line-height:1.9;
}
}


.wiki-store *,
.positive-donation-page *,
.wiki-store *::before,
.positive-donation-page *::before,
.wiki-store *::after{
.positive-donation-page *::after{
     box-sizing:border-box;
     box-sizing:border-box;
}
}


.wiki-store a{
.positive-donation-page img{
    display:block;
    width:100%;
    max-width:100%;
}
 
.positive-donation-page a{
    text-decoration:none;
     color:inherit;
     color:inherit;
    text-decoration:none;
}
}


.wiki-store img{
.pd-container{
     max-width:100%;
    width:100%;
     max-width:1280px;
    margin:auto;
}
}


.pd-section{
    width:100%;
    margin-top:30px;
}


/* =========================================================
.pd-title{
  TOP BAR
     text-align:center;
========================================================= */
     margin-bottom:20px;
 
.ws-topbar{
     background:var(--ws-primary-dark);
    color:#fff;
    border-radius:0 0 14px 14px;
    padding:8px 12px;
     margin-bottom:10px;
}
}


.ws-topbar-inner{
.pd-title span{
     display:flex;
     display:inline-flex;
    flex-wrap:wrap;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
     gap:12px 18px;
 
     font-size:12px;
    padding:5px 15px;
 
    background:var(--pink-light);
     color:var(--pink-dark);
 
    border-radius:30px;
 
     font-size:.85rem;
    font-weight:800;
 
    margin-bottom:7px;
}
}


.ws-top-item{
.pd-title h2{
     display:flex;
     margin:0;
     align-items:center;
 
     gap:6px;
     color:var(--purple);
     opacity:.95;
 
    font-size:1.45rem;
     line-height:1.65;
 
     font-weight:900;
}
}


.ws-top-item i{
.pd-title p{
     color:var(--ws-gold);
    max-width:700px;
 
    margin:6px auto 0;
 
     color:var(--muted);
 
    font-size:.88rem;
 
    line-height:1.9;
}
}


خط ۱۰۰: خط ۱۳۴:
========================================================= */
========================================================= */


.ws-header{
.pd-header{
 
     background:#fff;
     background:#fff;
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:12px;
    box-shadow:var(--ws-shadow);
    margin-bottom:12px;
}


.ws-header-main{
    border:1px solid var(--border);
     display:grid;
 
     grid-template-columns:1fr;
     border-radius:23px;
     gap:12px;
 
     padding:11px 14px;
 
     display:flex;
     align-items:center;
     align-items:center;
    justify-content:space-between;
    gap:10px;
    box-shadow:var(--shadow-soft);
}
}


.ws-logo{
.pd-brand{
 
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
    justify-content:center;
    gap:9px;
    color:var(--ws-primary);
    font-weight:900;
    font-size:23px;
    white-space:nowrap;
}


.ws-logo-icon{
     gap:10px;
     width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--ws-primary);
    color:#fff;
}
}


.ws-logo small{
.pd-logo{
    display:block;
    font-size:10px;
    color:var(--ws-secondary);
    margin-top:2px;
    font-weight:600;
}


    width:47px;
    height:47px;


/* =========================================================
    flex:0 0 47px;
  SEARCH
========================================================= */


.ws-search{
    display:flex;
     width:100%;
     align-items:center;
     position:relative;
     justify-content:center;
}


.ws-search input{
     border-radius:16px;
    width:100%;
    min-height:48px;
    border:2px solid #edf0f3;
    background:#f8fafc;
     border-radius:14px;
    outline:none;
    padding:0 48px 0 16px;
    font-family:inherit;
    font-size:14px;
    color:var(--ws-text);
    transition:.2s;
}


.ws-search input:focus{
    background:
    border-color:var(--ws-secondary);
        linear-gradient(
    background:#fff;
            145deg,
}
            var(--purple),
            var(--pink)
        );


.ws-search button{
    position:absolute;
    right:6px;
    top:6px;
    width:36px;
    height:36px;
    border:0;
    border-radius:10px;
    background:var(--ws-secondary);
     color:#fff;
     color:#fff;
     cursor:pointer;
 
     font-size:1.55rem;
    font-weight:900;
}
}


.pd-brand-text strong{
    display:block;
    color:var(--purple);


/* =========================================================
    font-size:.95rem;
  HEADER ACTIONS
========================================================= */


.ws-actions{
     line-height:1.5;
    display:grid;
     grid-template-columns:repeat(3,1fr);
    gap:7px;
}
}


.ws-action{
.pd-brand-text small{
     min-height:48px;
 
     border:1px solid var(--ws-border);
     display:block;
    border-radius:12px;
 
     background:#fff;
     color:var(--muted);
    display:flex;
 
    align-items:center;
     font-size:.72rem;
    justify-content:center;
}
    flex-direction:column;
 
    gap:3px;
.pd-menu{
    color:var(--ws-primary);
     display:none;
     font-size:11px;
}
}


.ws-action i{
.pd-header-btn{
     font-size:17px;
     display:none;
    color:var(--ws-secondary);
}
}




/* =========================================================
/* =========================================================
   NAVIGATION
   HERO
========================================================= */
========================================================= */


.ws-nav{
.pd-hero{
    background:var(--ws-primary);
 
    border-radius:14px;
     position:relative;
     overflow-x:auto;
 
    scrollbar-width:none;
     margin-top:12px;
     margin-top:12px;
}


.ws-nav::-webkit-scrollbar{
    min-height:310px;
     display:none;
 
    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);
}
}


.ws-nav-list{
.pd-hero::before{
     list-style:none;
 
     margin:0;
     content:"";
    padding:0;
 
     min-width:max-content;
     position:absolute;
     display:flex;
 
     align-items:center;
     width:240px;
}
     height:240px;
 
     border-radius:50%;


.ws-nav-list a{
     background:
     display:flex;
        rgba(232,91,155,.20);
    align-items:center;
    gap:7px;
    padding:13px 15px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}


.ws-nav-list a:hover{
    top:-110px;
     background:rgba(255,255,255,.1);
     right:-80px;
}
}


.ws-nav-list .ws-special{
.pd-hero-content{
    color:#ffe6a1;
}


    position:relative;
    z-index:2;


/* =========================================================
    min-height:310px;
  SECTION HEADER
========================================================= */


.ws-section{
     padding:28px 20px;
     margin-top:22px;
}


.ws-section-head{
     display:flex;
     display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}


.ws-section-title{
    flex-direction:column;
    margin:0;
 
    color:var(--ws-primary);
     justify-content:center;
    font-size:19px;
     font-weight:900;
}


.ws-section-title::before{
     align-items:flex-start;
     content:"";
    display:inline-block;
    width:5px;
    height:21px;
    border-radius:5px;
    background:var(--ws-gold);
    margin-left:8px;
    vertical-align:-4px;
}
}


.ws-more{
.pd-hero-badge{
    color:var(--ws-secondary);
    font-size:12px;
    font-weight:700;
}


    display:inline-flex;


/* =========================================================
    padding:6px 14px;
  CATEGORY QUICK MENU
========================================================= */


.ws-category-scroll{
     border-radius:30px;
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:3px 2px 8px;
     scrollbar-width:none;
}


.ws-category-scroll::-webkit-scrollbar{
    background:
    display:none;
        rgba(255,255,255,.15);
}


.ws-category{
     border:
     flex:0 0 112px;
        1px solid
    background:#fff;
        rgba(255,255,255,.4);
    border:1px solid var(--ws-border);
    border-radius:16px;
    padding:13px 8px;
    text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,.04);
    transition:.2s;
}


.ws-category:hover{
     color:#fff;
    transform:translateY(-3px);
     border-color:var(--ws-secondary);
}


.ws-category-icon{
     font-size:.78rem;
    width:55px;
    height:55px;
    margin:0 auto 8px;
    border-radius:50%;
    background:#eef7f3;
    display:grid;
    place-items:center;
    color:var(--ws-secondary);
     font-size:23px;
}


.ws-category strong{
     margin-bottom:9px;
    display:block;
    color:var(--ws-text);
     font-size:12px;
}
}


.pd-hero h1{


/* =========================================================
    margin:0;
  HERO SLIDER
 
========================================================= */
    color:#fff;


.ws-hero{
     font-size:1.8rem;
    position:relative;
     overflow:hidden;
    border-radius:20px;
    background:#e9edf2;
    box-shadow:var(--ws-shadow);
}


.ws-hero-track{
    line-height:1.65;
    display:flex;
    transition:transform .65s ease;
    direction:ltr;
}


.ws-hero-slide{
     max-width:700px;
    flex:0 0 100%;
     min-width:100%;
    aspect-ratio:16/6;
    position:relative;
    overflow:hidden;
    background:#edf0f3;
}
}


.ws-hero-slide img{
.pd-hero h1 strong{
     width:100%;
     color:#f7a9ca;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
}
}


.ws-hero-dots{
.pd-hero p{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    direction:ltr;
}


.ws-hero-dot{
    max-width:650px;
    width:8px;
    height:8px;
    border:0;
    padding:0;
    border-radius:50%;
    background:rgba(255,255,255,.7);
    cursor:pointer;
}


.ws-hero-dot.active{
     margin:8px 0 16px;
     width:22px;
    border-radius:10px;
    background:var(--ws-gold);
}


    color:
        rgba(255,255,255,.94);


/* =========================================================
    font-size:.88rem;
  TWO ROW PRODUCT SLIDER
========================================================= */


.ws-product-slider{
    line-height:2;
    position:relative;
    overflow:hidden;
    padding:2px 0 7px;
}
}


.ws-product-track{
.pd-buttons{
 
     display:flex;
     display:flex;
    width:max-content;
 
     flex-wrap:wrap;
     flex-wrap:wrap;
    flex-direction:column;
 
    height:auto;
     gap:8px;
     gap:10px;
    direction:ltr;
    transition:transform .65s ease;
}
}


.ws-product-row{
.pd-btn{
    display:flex;
    gap:10px;
    direction:rtl;
}


.ws-product-card{
     min-height:44px;
    flex:0 0 180px;
    width:180px;
    background:#fff;
    border:1px solid var(--ws-border);
     border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.045);
    direction:rtl;
    transition:.2s;
}


.ws-product-card:hover{
     display:inline-flex;
     transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.09);
}


.ws-product-image{
    width:100%;
    height:145px;
    display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
    background:#fff;
    padding:12px;
}


.ws-product-image img{
     padding:8px 18px;
     width:100%;
 
    height:100%;
     border-radius:14px;
     object-fit:contain;
 
     object-position:center;
     font-size:.78rem;
    display:block;
}


.ws-product-info{
    font-weight:900;
    padding:10px;
}
}


.ws-product-title{
.pd-btn-main{
    min-height:38px;
    margin:0 0 7px;
    color:var(--ws-text);
    font-size:12px;
    line-height:1.8;
    font-weight:700;
}


.ws-brand{
     background:#fff;
     color:var(--ws-muted);
    font-size:10px;
    margin-bottom:7px;
}


.ws-price{
     color:var(--purple);
    display:flex;
     align-items:center;
    justify-content:space-between;
    gap:5px;
}
}


.ws-old-price{
.pd-btn-light{
    color:#9aa3ad;
    text-decoration:line-through;
    font-size:10px;
}


.ws-new-price{
     color:#fff;
     color:var(--ws-primary);
    font-size:13px;
    font-weight:900;
}


.ws-discount{
     border:
    background:#fff1f1;
        1px solid
    color:#d64545;
        rgba(255,255,255,.45);
     border-radius:6px;
    padding:3px 5px;
    font-size:9px;
    font-weight:800;
}


.ws-product-actions{
     background:
     display:flex;
        rgba(255,255,255,.12);
    gap:6px;
    margin-top:9px;
}
}


.ws-cart{
    flex:1;
    border:0;
    border-radius:8px;
    padding:8px;
    background:var(--ws-secondary);
    color:#fff;
    font-family:inherit;
    font-size:10px;
    cursor:pointer;
}


.ws-favorite{
/* =========================================================
    width:34px;
  QUICK SERVICES
    border:1px solid var(--ws-border);
========================================================= */
    border-radius:8px;
    background:#fff;
    color:var(--ws-primary);
}


.pd-quick{


/* =========================================================
    display:grid;
  SLIDER BUTTONS
========================================================= */


.ws-slider-btn{
     grid-template-columns:
    position:absolute;
        repeat(2,1fr);
    top:50%;
     transform:translateY(-50%);
    z-index:5;
    width:36px;
    height:36px;
    border:1px solid var(--ws-border);
    border-radius:50%;
    background:#fff;
    color:var(--ws-primary);
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    cursor:pointer;
}


.ws-slider-prev{
     gap:10px;
     right:5px;
}
}


.ws-slider-next{
.pd-quick-card{
    left:5px;
}


    min-height:115px;


/* =========================================================
    background:#fff;
  BENEFITS
========================================================= */


.ws-benefits{
     border:
     display:grid;
        1px solid
    grid-template-columns:repeat(2,1fr);
        var(--border);
    gap:9px;
}


.ws-benefit{
     border-radius:21px;
    min-height:105px;
    background:#fff;
    border:1px solid var(--ws-border);
     border-radius:16px;
    padding:13px 8px;
    text-align:center;
}


.ws-benefit-icon{
     display:flex;
     width:42px;
 
    height:42px;
     flex-direction:column;
     margin:0 auto 7px;
 
    border-radius:50%;
     align-items:center;
     background:var(--ws-gold-light);
 
    color:var(--ws-gold);
     justify-content:center;
    display:grid;
 
     place-items:center;
     text-align:center;
     font-size:19px;
}


.ws-benefit strong{
     padding:11px;
     display:block;
    font-size:12px;
    color:var(--ws-primary);
}


.ws-benefit span{
     box-shadow:var(--shadow-soft);
    display:block;
    margin-top:4px;
     font-size:10px;
    color:var(--ws-muted);
}
}


.pd-quick-icon{


/* =========================================================
    width:44px;
  CATEGORY GRID
    height:44px;
========================================================= */


.ws-category-grid{
     border-radius:15px;
     display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}


.ws-category-box{
    background:#fff;
    border:1px solid var(--ws-border);
    border-radius:17px;
    padding:12px;
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     gap:10px;
     justify-content:center;
    min-height:88px;
    transition:.2s;
}


.ws-category-box:hover{
     background:var(--purple-light);
     border-color:var(--ws-secondary);
    transform:translateY(-3px);
}


.ws-category-box-icon{
     color:var(--purple);
     flex:0 0 52px;
 
    width:52px;
     font-size:1.15rem;
    height:52px;
 
    border-radius:13px;
     margin-bottom:5px;
    display:grid;
     place-items:center;
    background:#edf7f3;
    color:var(--ws-secondary);
     font-size:22px;
}
}


.ws-category-box strong{
.pd-quick-card:nth-child(2)
    display:block;
.pd-quick-icon{
     color:var(--ws-primary);
 
    font-size:12px;
     background:var(--pink-light);
}


.ws-category-box span{
     color:var(--pink);
    display:block;
     color:var(--ws-muted);
    font-size:10px;
    margin-top:4px;
}
}


.pd-quick-card strong{


/* =========================================================
    color:var(--purple);
  BRANDS
========================================================= */


.ws-brands{
     font-size:.85rem;
    display:grid;
     grid-template-columns:repeat(2,1fr);
    gap:9px;
}
}


.ws-brand-card{
.pd-quick-card small{
    height:75px;
 
     border:1px solid var(--ws-border);
     color:var(--muted);
    border-radius:14px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
}


.ws-brand-card img{
     font-size:.72rem;
    width:100%;
    height:100%;
     object-fit:contain;
}
}




/* =========================================================
/* =========================================================
   ARTICLES
   START
========================================================= */
========================================================= */


.ws-articles{
.pd-start{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
}


.ws-article{
     padding:23px 16px;
     background:#fff;
    border:1px solid var(--ws-border);
    border-radius:16px;
    overflow:hidden;
    transition:.2s;
}


.ws-article:hover{
    background:
     transform:translateY(-3px);
        linear-gradient(
}
            135deg,
            #fff,
            var(--lavender)
        );
 
     border:
        1px solid
        var(--border);
 
    border-radius:27px;


.ws-article-image{
    box-shadow:var(--shadow-soft);
    height:150px;
    background:#edf0f3;
}


.ws-article-image img{
     text-align:center;
    width:100%;
    height:100%;
    display:block;
     object-fit:cover;
}
}


.ws-article-content{
.pd-start h2{
    padding:12px;
}


.ws-article h3{
     margin:0;
     margin:0;
     color:var(--ws-primary);
 
     font-size:14px;
     color:var(--purple);
    line-height:1.8;
 
     font-size:1.25rem;
}
}


.ws-article p{
.pd-start p{
     color:var(--ws-muted);
 
     font-size:11px;
    margin:6px auto 15px;
    line-height:1.9;
 
    margin:6px 0 9px;
     color:var(--muted);
}
 
     font-size:.82rem;


.ws-read{
     max-width:650px;
    color:var(--ws-secondary);
    font-size:11px;
     font-weight:800;
}
}


.pd-start-options{


/* =========================================================
    display:grid;
  CTA
========================================================= */


.ws-cta{
     grid-template-columns:
     margin-top:25px;
         repeat(2,1fr);
    padding:22px 15px;
 
    border-radius:20px;
     gap:9px;
    background:
         linear-gradient(135deg,
        var(--ws-primary-dark),
        var(--ws-primary));
    color:#fff;
    text-align:center;
    position:relative;
     overflow:hidden;
}
}


.ws-cta::after{
.pd-start-option{
     content:"";
 
     position:absolute;
     padding:13px 8px;
     width:180px;
 
    height:180px;
     background:#fff;
     border-radius:50%;
 
     background:rgba(201,154,46,.12);
     border:
     left:-60px;
        1px solid
    top:-80px;
        var(--border);
}
 
     border-radius:18px;
 
     color:var(--purple);
 
     font-size:.76rem;


.ws-cta h2{
     font-weight:900;
    position:relative;
    z-index:2;
    margin:0 0 8px;
     font-size:20px;
}
}


.ws-cta p{
    position:relative;
    z-index:2;
    margin:0 auto 15px;
    max-width:650px;
    color:#e5ebf0;
    font-size:12px;
    line-height:2;
}


.ws-cta-btn{
/* =========================================================
  DONATION SERVICES
========================================================= */
 
.pd-donation{
 
     position:relative;
     position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--ws-gold);
    color:#fff;
    padding:11px 22px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
}


    overflow:hidden;


/* =========================================================
    padding:27px 8px 22px;
  FOOTER
========================================================= */


.ws-footer{
     border-radius:34px;
    margin-top:25px;
    background:var(--ws-primary-dark);
    color:#fff;
     border-radius:20px 20px 0 0;
    padding:24px 15px 15px;
}


.ws-footer-grid{
     background:
     display:grid;
        linear-gradient(
    grid-template-columns:1fr;
            180deg,
    gap:20px;
            #fff,
            #fff8fc
        );
}
}


.ws-footer h3{
.pd-donation::before{
    margin:0 0 10px;
    font-size:14px;
    color:#fff;
}


.ws-footer p,
     content:"";
.ws-footer li,
.ws-footer a{
     color:#cbd5df;
    font-size:11px;
    line-height:2;
}


.ws-footer ul{
     position:absolute;
     margin:0;
    padding:0;
    list-style:none;
}


.ws-footer li{
    width:390px;
     margin-bottom:3px;
     height:390px;
}


.ws-footer i{
    border-radius:
    color:var(--ws-gold);
        48% 52% 62% 38% /
    width:20px;
        42% 39% 61% 58%;
}


.ws-footer-bottom{
     background:
     border-top:1px solid rgba(255,255,255,.1);
    margin-top:18px;
    padding-top:12px;
    text-align:center;
    color:#9eabb7;
    font-size:10px;
}


        radial-gradient(
            circle at 35% 30%,
            rgba(232,91,155,.30),
            rgba(232,91,155,.11) 45%,
            transparent 70%
        );


/* =========================================================
    top:-110px;
  TABLET
    right:-100px;
========================================================= */


@media (min-width:600px){
    transform:rotate(-15deg);


     .wiki-store{
     pointer-events:none;
        padding-left:18px;
}
        padding-right:18px;
    }


    .ws-header-main{
.pd-donation::after{
        grid-template-columns:180px 1fr;
    }


     .ws-actions{
     content:"";
        grid-column:1 / -1;
        grid-template-columns:repeat(3,1fr);
    }


     .ws-benefits{
     position:absolute;
        grid-template-columns:repeat(4,1fr);
    }


     .ws-category-grid{
     width:320px;
        grid-template-columns:repeat(3,1fr);
     height:280px;
     }


     .ws-brands{
     border-radius:
         grid-template-columns:repeat(4,1fr);
        60% 40% 42% 58% /
    }
         55% 45% 55% 45%;


     .ws-articles{
     background:
         grid-template-columns:repeat(2,1fr);
         rgba(88,49,116,.09);
     }
 
     bottom:-125px;
    left:-90px;


     .ws-product-card{
     transform:rotate(15deg);
        flex-basis:205px;
        width:205px;
    }


     .ws-product-image{
     pointer-events:none;
        height:160px;
    }
}
}


.pd-donation .pd-title,
.pd-donation-grid{


/* =========================================================
    position:relative;
  DESKTOP
========================================================= */


@media (min-width:900px){
    z-index:2;
}


    .wiki-store{
.pd-donation-grid{
        padding-left:25px;
        padding-right:25px;
    }


     .ws-topbar-inner{
     display:grid;
        justify-content:space-between;
        font-size:12px;
    }


     .ws-header{
     grid-template-columns:1fr;
        padding:15px;
    }


     .ws-header-main{
     gap:13px;
        grid-template-columns:190px minmax(300px,1fr) 245px;
}
    }


    .ws-actions{
.pd-donation-card{
        grid-column:auto;
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }


     .ws-logo{
     position:relative;
        justify-content:flex-start;
    }


     .ws-category{
     min-height:270px;
        flex-basis:140px;
    }


     .ws-category-grid{
     overflow:hidden;
        grid-template-columns:repeat(4,1fr);
    }


     .ws-brands{
     background:#fff;
        grid-template-columns:repeat(6,1fr);
    }


     .ws-articles{
     border:
         grid-template-columns:repeat(3,1fr);
        1px solid
    }
         rgba(232,91,155,.22);


     .ws-product-card{
     border-radius:29px;
         flex-basis:225px;
 
         width:225px;
    box-shadow:
    }
         0 12px 30px
         rgba(88,49,116,.11);


     .ws-product-image{
     padding:15px;
        height:175px;
    }


     .ws-footer-grid{
     display:flex;
        grid-template-columns:2fr 1fr 1fr 1fr;
    }


     .ws-section{
     flex-direction:column;
        margin-top:30px;
    }


     .ws-section-title{
     justify-content:flex-end;
        font-size:21px;
    }
}
}


.pd-donation-image{
    position:absolute;


/* =========================================================
    inset:0;
  LARGE DESKTOP
========================================================= */


@media (min-width:1200px){
    z-index:0;
}


    .wiki-store{
.pd-donation-image img{
        padding-left:30px;
        padding-right:30px;
    }


     .ws-product-card{
     width:100%;
        flex-basis:240px;
    height:100%;
        width:240px;
    }


     .ws-product-image{
     object-fit:cover;
        height:190px;
    }


     .ws-category-grid{
     object-position:center;
        grid-template-columns:repeat(6,1fr);
    }
}
}


.pd-donation-image::after{


/* =========================================================
    content:"";
  ACCESSIBILITY
========================================================= */


.ws-search input:focus-visible,
     position:absolute;
.ws-nav a:focus-visible,
.ws-slider-btn:focus-visible,
.ws-hero-dot:focus-visible,
.ws-cart:focus-visible,
.ws-favorite:focus-visible{
    outline:3px solid rgba(35,139,104,.3);
     outline-offset:2px;
}


@media (prefers-reduced-motion:reduce){
    inset:0;


     .ws-hero-track,
     background:
    .ws-product-track,
        linear-gradient(
    .ws-category,
            180deg,
    .ws-product-card,
            rgba(63,32,88,.02) 15%,
    .ws-category-box,
            rgba(63,32,88,.82) 100%
    .ws-article{
         );
         transition:none !important;
    }
}
}


</style>
.pd-donation-content{


    position:relative;


<div class="wiki-store">
    z-index:2;


<!-- ======================================================
    padding:5px;
    TOP BAR
====================================================== -->


<header class="ws-topbar">
    color:#fff;
}


    <div class="ws-topbar-inner">
.pd-donation-icon{


        <div class="ws-top-item">
    width:47px;
            <i class="fa-solid fa-headset"></i>
    height:47px;
            پشتیبانی و مشاوره تخصصی
        </div>


        <div class="ws-top-item">
    border-radius:16px;
            <i class="fa-solid fa-clock"></i>
            شنبه تا پنجشنبه ۸ تا ۲۰
        </div>


        <div class="ws-top-item">
    background:
            <i class="fa-solid fa-phone"></i>
         rgba(255,255,255,.93);
            ۰۲۱-۱۲۳۴۵۶۷۸
         </div>


        <div class="ws-top-item">
    color:var(--purple);
            <i class="fa-solid fa-truck-fast"></i>
            ارسال سریع
        </div>


     </div>
     display:flex;


</header>
    align-items:center;
    justify-content:center;


    font-size:1.2rem;


<!-- ======================================================
    margin-bottom:7px;
    HEADER
}
====================================================== -->


<header class="ws-header">
.pd-donation-card h3{


     <div class="ws-header-main">
     margin:0;


        <!-- LOGO -->
    font-size:1.12rem;


        <a href="#" class="ws-logo" aria-label="صفحه اصلی">
    color:#fff;
}


            <span class="ws-logo-icon">
.pd-donation-card p{
                <i class="fa-solid fa-bolt"></i>
            </span>


            <span>
    margin:5px 0 10px;
                برق‌مارکت
                <small>فروش تخصصی تجهیزات برق و شبکه</small>
            </span>


         </a>
    color:
         rgba(255,255,255,.94);


    font-size:.78rem;


        <!-- SEARCH -->
    line-height:1.9;
}


        <form class="ws-search" role="search">
.pd-donation-actions{


            <input
    display:flex;
                type="search"
                placeholder="جستجوی محصول، برند یا دسته‌بندی..."
                aria-label="جستجوی محصولات">


            <button type="submit" aria-label="جستجو">
    gap:7px;
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>


        </form>
    flex-wrap:wrap;
}


.pd-donation-actions a{


         <!-- ACTIONS -->
    background:
         rgba(255,255,255,.94);


        <div class="ws-actions">
    color:var(--purple);


            <a href="#" class="ws-action">
    padding:6px 10px;
                <i class="fa-regular fa-user"></i>
                <span>حساب کاربری</span>
            </a>


            <a href="#" class="ws-action">
    border-radius:12px;
                <i class="fa-regular fa-heart"></i>
                <span>علاقه‌مندی</span>
            </a>


            <a href="#" class="ws-action">
    font-size:.68rem;
                <i class="fa-solid fa-cart-shopping"></i>
                <span>سبد خرید</span>
            </a>


        </div>
    font-weight:900;
}


    </div>


/* =========================================================
  RECEIVER / DONOR
========================================================= */


    <!-- NAV -->
.pd-choice{


     <nav class="ws-nav" aria-label="منوی اصلی">
     display:grid;


        <ul class="ws-nav-list">
    grid-template-columns:1fr;


            <li>
    gap:12px;
                <a href="#">
}
                    <i class="fa-solid fa-bars"></i>
                    دسته‌بندی محصولات
                </a>
            </li>


            <li>
.pd-choice-card{
                <a href="#">تجهیزات شبکه</a>
            </li>


            <li>
    position:relative;
                <a href="#">برق صنعتی</a>
            </li>


            <li>
    overflow:hidden;
                <a href="#">فیبر نوری</a>
            </li>


            <li>
    min-height:185px;
                <a href="#">تجهیزات سرور</a>
            </li>


            <li>
    border-radius:27px;
                <a href="#">تجهیزات حفاظتی</a>
            </li>


            <li>
    padding:21px;
                <a href="#" class="ws-special">
                    <i class="fa-solid fa-percent"></i>
                    تخفیف‌ها
                </a>
            </li>


        </ul>
    display:flex;


     </nav>
     flex-direction:column;


</header>
    justify-content:flex-end;


    box-shadow:var(--shadow);


<!-- ======================================================
    color:#fff;
    QUICK CATEGORIES
}
====================================================== -->


<section class="ws-section" aria-labelledby="quick-category-title">
.pd-choice-card:first-child{


     <div class="ws-section-head">
     background:
        linear-gradient(
            135deg,
            var(--purple),
            #80509c
        );
}


        <h1 id="quick-category-title" class="ws-section-title">
.pd-choice-card:last-child{
            خرید تجهیزات برق و شبکه
        </h1>


         <a href="#" class="ws-more">
    background:
             مشاهده همه
         linear-gradient(
         </a>
            135deg,
            var(--pink),
             #ef83b1
         );
}


    </div>
.pd-choice-card::before{


    content:"";


     <div class="ws-category-scroll">
     position:absolute;


        <a href="#" class="ws-category">
    width:150px;
            <div class="ws-category-icon">
    height:150px;
                <i class="fa-solid fa-network-wired"></i>
            </div>
            <strong>تجهیزات شبکه</strong>
        </a>


        <a href="#" class="ws-category">
    border-radius:50%;
            <div class="ws-category-icon">
                <i class="fa-solid fa-server"></i>
            </div>
            <strong>سرور و رک</strong>
        </a>


        <a href="#" class="ws-category">
    background:
            <div class="ws-category-icon">
         rgba(255,255,255,.10);
                <i class="fa-solid fa-bolt"></i>
            </div>
            <strong>برق صنعتی</strong>
         </a>


        <a href="#" class="ws-category">
    top:-60px;
            <div class="ws-category-icon">
    left:-40px;
                <i class="fa-solid fa-fiber"></i>
}
            </div>
            <strong>فیبر نوری</strong>
        </a>


        <a href="#" class="ws-category">
.pd-choice-card h3{
            <div class="ws-category-icon">
                <i class="fa-solid fa-wifi"></i>
            </div>
            <strong>تجهیزات رادیویی</strong>
        </a>


        <a href="#" class="ws-category">
    position:relative;
            <div class="ws-category-icon">
                <i class="fa-solid fa-shield-halved"></i>
            </div>
            <strong>تجهیزات حفاظتی</strong>
        </a>


     </div>
     margin:0;


</section>
    font-size:1.12rem;
}


.pd-choice-card p{


<!-- ======================================================
    position:relative;
    HERO SLIDER
    فقط آدرس تصاویر را عوض کنید
====================================================== -->


<section class="ws-section" aria-label="بنرهای فروشگاه">
    margin:5px 0 11px;


     <div class="ws-hero" data-hero-slider>
     font-size:.78rem;


         <div class="ws-hero-track">
    color:
         rgba(255,255,255,.93);
}


            <a href="#" class="ws-hero-slide">
.pd-choice-card a{
                <img
                    src="https://placehold.co/1600x600/0b3157/ffffff?text=Banner+1"
                    alt="خرید تجهیزات برق و شبکه">
            </a>


            <a href="#" class="ws-hero-slide">
    position:relative;
                <img
                    src="https://placehold.co/1600x600/238b68/ffffff?text=Banner+2"
                    alt="تخفیف تجهیزات شبکه">
            </a>


            <a href="#" class="ws-hero-slide">
    width:max-content;
                <img
                    src="https://placehold.co/1600x600/c99a2e/ffffff?text=Banner+3"
                    alt="فروش ویژه تجهیزات برق">
            </a>


        </div>
    padding:7px 12px;


    border-radius:13px;


        <div class="ws-hero-dots"></div>
    background:#fff;


     </div>
     color:var(--purple);


</section>
    font-size:.68rem;


    font-weight:900;
}


<!-- ======================================================
    SPECIAL PRODUCTS
====================================================== -->


<section class="ws-section" aria-labelledby="special-products-title">
/* =========================================================
  همراهی و آگاهی
  MOBILE = VERTICAL
========================================================= */


    <div class="ws-section-head">
.pd-image-slider{


        <h2 id="special-products-title" class="ws-section-title">
    display:grid;
            محصولات ویژه و پیشنهادهای امروز
        </h2>


        <a href="#" class="ws-more">
    grid-template-columns:1fr;
            مشاهده همه محصولات
        </a>


     </div>
     gap:13px;


    width:100%;
}


    <div class="ws-product-slider" data-product-slider>
.pd-image-slide{


        <button
    width:100%;
            class="ws-slider-btn ws-slider-prev"
            type="button"
            aria-label="محصولات قبلی">
            <i class="fa-solid fa-chevron-right"></i>
        </button>


    min-width:0;


        <div class="ws-product-track">
    height:190px;


            <!-- ROW 1 -->
    position:relative;


            <div class="ws-product-row">
    overflow:hidden;


                <article class="ws-product-card">
    border-radius:26px;


                    <div class="ws-product-image">
    background:var(--purple);
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+1"
                            alt="سوئیچ شبکه">
                    </div>


                    <div class="ws-product-info">
    box-shadow:var(--shadow-soft);
}


                        <div class="ws-brand">برند نمونه</div>
.pd-image-slide img{


                        <h3 class="ws-product-title">
    width:100%;
                            سوئیچ شبکه مدیریتی حرفه‌ای
    height:100%;
                        </h3>


                        <div class="ws-price">
    object-fit:cover;
                            <span class="ws-new-price">
                                ۲,۴۵۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
    object-position:center;
                                ۱۵٪
}
                            </span>
                        </div>


                        <div class="ws-product-actions">
.pd-image-slide::after{


                            <button class="ws-cart">
    content:"";
                                افزودن به سبد
                            </button>


                            <button
    position:absolute;
                                class="ws-favorite"
                                aria-label="افزودن به علاقه‌مندی">
                                <i class="fa-regular fa-heart"></i>
                            </button>


                        </div>
    inset:0;


                    </div>
    background:
        linear-gradient(
            transparent 30%,
            rgba(63,32,88,.75)
        );
}


                </article>
.pd-image-slide span{


    position:absolute;


                <article class="ws-product-card">
    z-index:2;


                    <div class="ws-product-image">
    right:16px;
                        <img
    bottom:13px;
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+2"
                            alt="مودم فیبر نوری">
                    </div>


                    <div class="ws-product-info">
    color:#fff;


                        <div class="ws-brand">برند نمونه</div>
    font-size:.82rem;


                        <h3 class="ws-product-title">
    font-weight:900;
                            مودم فیبر نوری دو بانده
}
                        </h3>


                        <div class="ws-price">
                            <span class="ws-new-price">
                                ۱,۸۹۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
/* =========================================================
                                ۱۰٪
  BENEFITS
                            </span>
========================================================= */
                        </div>


                        <div class="ws-product-actions">
.pd-benefits{


                            <button class="ws-cart">
    display:grid;
                                افزودن به سبد
                            </button>


                            <button class="ws-favorite">
    grid-template-columns:
                                <i class="fa-regular fa-heart"></i>
        repeat(2,1fr);
                            </button>


                        </div>
    gap:10px;
}


                    </div>
.pd-benefit{


                </article>
    background:#fff;


    border:
        1px solid
        var(--border);


                <article class="ws-product-card">
    border-radius:22px;


                    <div class="ws-product-image">
    padding:16px 9px;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+3"
                            alt="کابل شبکه">
                    </div>


                    <div class="ws-product-info">
    text-align:center;


                        <div class="ws-brand">برند نمونه</div>
    box-shadow:var(--shadow-soft);
}


                        <h3 class="ws-product-title">
.pd-benefit-icon{
                            کابل شبکه CAT6 با کیفیت بالا
                        </h3>


                        <div class="ws-price">
    width:44px;
                            <span class="ws-new-price">
    height:44px;
                                ۷۵۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
    margin:0 auto 7px;
                                ۲۰٪
                            </span>
                        </div>


                        <div class="ws-product-actions">
    border-radius:15px;


                            <button class="ws-cart">
    background:var(--purple-light);
                                افزودن به سبد
                            </button>


                            <button class="ws-favorite">
    color:var(--purple);
                                <i class="fa-regular fa-heart"></i>
                            </button>


                        </div>
    display:flex;


                    </div>
    align-items:center;
    justify-content:center;


                </article>
    font-size:1rem;
}


            </div>
.pd-benefit:nth-child(even)
.pd-benefit-icon{


    background:var(--pink-light);


            <!-- ROW 2 -->
    color:var(--pink);
}


            <div class="ws-product-row">
.pd-benefit strong{


                <article class="ws-product-card">
    display:block;


                    <div class="ws-product-image">
    color:var(--purple);
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+4"
                            alt="رک شبکه">
                    </div>


                    <div class="ws-product-info">
    font-size:.8rem;
}


                        <div class="ws-brand">برند نمونه</div>
.pd-benefit small{


                        <h3 class="ws-product-title">
    color:var(--muted);
                            رک شبکه دیواری استاندارد
                        </h3>


                        <div class="ws-price">
    font-size:.68rem;
                            <span class="ws-new-price">
}
                                ۳,۲۵۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
                                ۱۲٪
                            </span>
                        </div>


                        <div class="ws-product-actions">
/* =========================================================
                            <button class="ws-cart">
  STEPS
                                افزودن به سبد
========================================================= */
                            </button>
                            <button class="ws-favorite">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>


                    </div>
.pd-steps{


                </article>
    display:grid;


    grid-template-columns:1fr;


                <article class="ws-product-card">
    gap:9px;
}


                    <div class="ws-product-image">
.pd-step{
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+5"
                            alt="پچ پنل شبکه">
                    </div>


                    <div class="ws-product-info">
    background:#fff;


                        <div class="ws-brand">برند نمونه</div>
    border:
        1px solid
        var(--border);


                        <h3 class="ws-product-title">
    border-radius:21px;
                            پچ پنل شبکه ۲۴ پورت
                        </h3>


                        <div class="ws-price">
    padding:14px;
                            <span class="ws-new-price">
                                ۱,۱۵۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
    display:flex;
                                ۸٪
                            </span>
                        </div>


                        <div class="ws-product-actions">
    align-items:center;
                            <button class="ws-cart">
                                افزودن به سبد
                            </button>
                            <button class="ws-favorite">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>


                    </div>
    gap:12px;


                </article>
    box-shadow:var(--shadow-soft);
}


.pd-step-number{


                <article class="ws-product-card">
    width:44px;
    height:44px;


                    <div class="ws-product-image">
    flex:0 0 44px;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Product+6"
                            alt="ماژول فیبر نوری">
                    </div>


                    <div class="ws-product-info">
    border-radius:15px;


                        <div class="ws-brand">برند نمونه</div>
    background:var(--purple);


                        <h3 class="ws-product-title">
    color:#fff;
                            ماژول فیبر نوری SFP
                        </h3>


                        <div class="ws-price">
    display:flex;
                            <span class="ws-new-price">
                                ۹۸۰,۰۰۰ تومان
                            </span>


                            <span class="ws-discount">
    align-items:center;
                                ۱۸٪
    justify-content:center;
                            </span>
                        </div>


                        <div class="ws-product-actions">
    font-weight:900;
                            <button class="ws-cart">
                                افزودن به سبد
                            </button>
                            <button class="ws-favorite">
                                <i class="fa-regular fa-heart"></i>
                            </button>
                        </div>


                    </div>
    font-size:.9rem;
}


                </article>
.pd-step:nth-child(2)
.pd-step-number{
    background:var(--pink);
}


            </div>
.pd-step:nth-child(3)
.pd-step-number{
    background:#9b70b3;
}


        </div>
.pd-step:nth-child(4)
.pd-step-number{
    background:var(--gold);
}


.pd-step strong{


        <button
    display:block;
            class="ws-slider-btn ws-slider-next"
            type="button"
            aria-label="محصولات بعدی">
            <i class="fa-solid fa-chevron-left"></i>
        </button>


     </div>
     color:var(--purple);


</section>
    font-size:.8rem;
}


.pd-step small{


<!-- ======================================================
    color:var(--muted);
    BENEFITS
====================================================== -->


<section class="ws-section" aria-labelledby="benefits-title">
    font-size:.68rem;
}


    <div class="ws-section-head">


        <h2 id="benefits-title" class="ws-section-title">
/* =========================================================
            چرا از ما خرید کنید؟
  مجله اهدای مثبت
        </h2>
  MOBILE = VERTICAL
========================================================= */


    </div>
.pd-articles{


    display:grid;


     <div class="ws-benefits">
     grid-template-columns:1fr;


        <div class="ws-benefit">
    gap:14px;


            <div class="ws-benefit-icon">
    width:100%;
                <i class="fa-solid fa-truck-fast"></i>
}
            </div>


            <strong>ارسال سریع</strong>
.pd-article{
            <span>ارسال سفارش در کوتاه‌ترین زمان</span>


        </div>
    width:100%;


    min-width:0;


        <div class="ws-benefit">
    overflow:hidden;


            <div class="ws-benefit-icon">
    background:#fff;
                <i class="fa-solid fa-headset"></i>
            </div>


            <strong>مشاوره تخصصی</strong>
    border:
            <span>راهنمایی قبل از خرید</span>
        1px solid
        var(--border);


        </div>
    border-radius:26px;


    box-shadow:var(--shadow-soft);
}


        <div class="ws-benefit">
.pd-article-image{


            <div class="ws-benefit-icon">
    width:100%;
                <i class="fa-solid fa-shield-halved"></i>
            </div>


            <strong>ضمانت اصالت</strong>
    height:180px;
            <span>تضمین کیفیت و اصالت کالا</span>


        </div>
    background:var(--lavender);
}


.pd-article-image img{


        <div class="ws-benefit">
    width:100%;
    height:100%;


            <div class="ws-benefit-icon">
    object-fit:cover;
                <i class="fa-solid fa-credit-card"></i>
            </div>


            <strong>پرداخت مطمئن</strong>
    object-position:center;
            <span>پرداخت امن و آسان</span>
}


        </div>
.pd-article-body{


     </div>
     padding:15px;
}


</section>
.pd-article-body small{


    color:var(--pink-dark);


<!-- ======================================================
    font-size:.68rem;
    PRODUCT CATEGORIES
====================================================== -->


<section class="ws-section" aria-labelledby="categories-title">
    font-weight:900;
}


    <div class="ws-section-head">
.pd-article-body h3{


        <h2 id="categories-title" class="ws-section-title">
    margin:5px 0;
            دسته‌بندی محصولات
        </h2>


        <a href="#" class="ws-more">
    color:var(--purple);
            همه دسته‌بندی‌ها
        </a>


     </div>
     font-size:.9rem;


    line-height:1.8;
}


    <div class="ws-category-grid">
.pd-article-body p{


        <a href="#" class="ws-category-box">
    margin:0;


            <div class="ws-category-box-icon">
    color:var(--muted);
                <i class="fa-solid fa-network-wired"></i>
            </div>


            <div>
    font-size:.7rem;
                <strong>تجهیزات شبکه</strong>
                <span>سوئیچ، روتر و تجهیزات شبکه</span>
            </div>


        </a>
    line-height:1.9;
}




        <a href="#" class="ws-category-box">
/* =========================================================
  FAQ
========================================================= */


            <div class="ws-category-box-icon">
.pd-faq{
                <i class="fa-solid fa-server"></i>
            </div>


            <div>
    display:grid;
                <strong>سرور و تجهیزات رک</strong>
                <span>رک، سرور و تجهیزات جانبی</span>
            </div>


        </a>
    gap:9px;
}


.pd-faq details{


        <a href="#" class="ws-category-box">
    background:#fff;


            <div class="ws-category-box-icon">
    border:
                <i class="fa-solid fa-bolt"></i>
        1px solid
            </div>
        var(--border);


            <div>
    border-radius:19px;
                <strong>برق صنعتی</strong>
                <span>تجهیزات برق و اتوماسیون</span>
            </div>


        </a>
    padding:13px 15px;


    box-shadow:var(--shadow-soft);
}


        <a href="#" class="ws-category-box">
.pd-faq summary{


            <div class="ws-category-box-icon">
    cursor:pointer;
                <i class="fa-solid fa-signal"></i>
            </div>


            <div>
    color:var(--purple);
                <strong>فیبر نوری</strong>
                <span>کابل و تجهیزات فیبر نوری</span>
            </div>


        </a>
    font-size:.78rem;


    font-weight:900;
}


        <a href="#" class="ws-category-box">
.pd-faq p{


            <div class="ws-category-box-icon">
    color:var(--muted);
                <i class="fa-solid fa-wifi"></i>
            </div>


            <div>
    font-size:.72rem;
                <strong>تجهیزات وایرلس</strong>
                <span>آنتن و تجهیزات رادیویی</span>
            </div>


        </a>
    line-height:2;


    margin:9px 0 0;
}


        <a href="#" class="ws-category-box">


            <div class="ws-category-box-icon">
/* =========================================================
                <i class="fa-solid fa-video"></i>
  CTA
            </div>
========================================================= */


            <div>
.pd-cta{
                <strong>دوربین و امنیت</strong>
                <span>سیستم‌های حفاظتی و امنیتی</span>
            </div>


        </a>
    position:relative;


     </div>
     overflow:hidden;


</section>
    padding:32px 18px;


    border-radius:31px;


<!-- ======================================================
    text-align:center;
    BRANDS
====================================================== -->


<section class="ws-section" aria-labelledby="brands-title">
    background:


    <div class="ws-section-head">
        radial-gradient(
            circle at 85% 15%,
            rgba(232,91,155,.34),
            transparent 30%
        ),


         <h2 id="brands-title" class="ws-section-title">
         linear-gradient(
             برندهای محبوب
            135deg,
         </h2>
            var(--purple-dark),
             var(--purple)
         );


     </div>
     box-shadow:var(--shadow);
}


.pd-cta::before{


     <div class="ws-brands">
     content:"♥";


        <a href="#" class="ws-brand-card">
    position:absolute;
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+1"
                alt="برند تجهیزات شبکه">
        </a>


        <a href="#" class="ws-brand-card">
    font-size:160px;
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+2"
                alt="برند تجهیزات برق">
        </a>


        <a href="#" class="ws-brand-card">
    color:
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+3"
         rgba(255,255,255,.04);
                alt="برند تجهیزات فیبر نوری">
         </a>


        <a href="#" class="ws-brand-card">
    left:-10px;
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+4"
    bottom:-65px;
                alt="برند تجهیزات شبکه">
}
        </a>


        <a href="#" class="ws-brand-card">
.pd-cta h2{
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+5"
                alt="برند تجهیزات سرور">
        </a>


        <a href="#" class="ws-brand-card">
    position:relative;
            <img src="https://placehold.co/300x120/ffffff/0b3157?text=BRAND+6"
                alt="برند تجهیزات برق صنعتی">
        </a>


     </div>
     margin:0 0 6px;


</section>
    color:#fff;


    font-size:1.35rem;
}


<!-- ======================================================
.pd-cta p{
    BEST SELLERS
====================================================== -->


<section class="ws-section" aria-labelledby="best-title">
    position:relative;


     <div class="ws-section-head">
     max-width:650px;


        <h2 id="best-title" class="ws-section-title">
    margin:0 auto 15px;
            پرفروش‌ترین محصولات
        </h2>


        <a href="#" class="ws-more">
    color:
            مشاهده همه
         rgba(255,255,255,.88);
         </a>


     </div>
     font-size:.76rem;


    line-height:2;
}


    <div class="ws-product-slider" data-product-slider>
.pd-cta a{


        <div class="ws-product-track">
    position:relative;


            <div class="ws-product-row">
    display:inline-flex;


                <article class="ws-product-card">
    padding:9px 19px;


                    <div class="ws-product-image">
    border-radius:15px;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+1"
                            alt="سوئیچ شبکه پرفروش">
                    </div>


                    <div class="ws-product-info">
    background:#fff;


                        <h3 class="ws-product-title">
    color:var(--purple);
                            سوئیچ شبکه ۲۴ پورت
                        </h3>


                        <div class="ws-price">
    font-size:.74rem;
                            <span class="ws-new-price">
                                ۳,۲۰۰,۰۰۰ تومان
                            </span>
                        </div>


                    </div>
    font-weight:900;
}


                </article>


/* =========================================================
  FOOTER
========================================================= */


                <article class="ws-product-card">
.pd-footer{


                    <div class="ws-product-image">
    margin-top:30px;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+2"
                            alt="روتر شبکه پرفروش">
                    </div>


                    <div class="ws-product-info">
    padding:24px 15px;


                        <h3 class="ws-product-title">
    background:
                            روتر حرفه‌ای شبکه
        var(--lavender);
                        </h3>


                        <div class="ws-price">
    border:
                            <span class="ws-new-price">
        1px solid
                                ۲,۷۵۰,۰۰۰ تومان
        var(--border);
                            </span>
                        </div>


                    </div>
    border-radius:26px;


                </article>
    padding-bottom:90px;
}


.pd-footer-grid{


                <article class="ws-product-card">
    display:grid;


                    <div class="ws-product-image">
    grid-template-columns:1fr;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+3"
                            alt="کابل شبکه پرفروش">
                    </div>


                    <div class="ws-product-info">
    gap:20px;
}


                        <h3 class="ws-product-title">
.pd-footer h3{
                            کابل شبکه CAT6
                        </h3>


                        <div class="ws-price">
    margin:0 0 7px;
                            <span class="ws-new-price">
                                ۸۵۰,۰۰۰ تومان
                            </span>
                        </div>


                    </div>
    color:var(--purple);


                </article>
    font-size:.86rem;
}


            </div>
.pd-footer p,
.pd-footer li{


            <div class="ws-product-row">
    color:var(--muted);


                <article class="ws-product-card">
    font-size:.68rem;


                    <div class="ws-product-image">
    line-height:2;
                        <img
}
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+4"
                            alt="رک شبکه پرفروش">
                    </div>


                    <div class="ws-product-info">
.pd-footer ul{


                        <h3 class="ws-product-title">
    list-style:none;
                            رک شبکه ۹ یونیت
                        </h3>


                        <div class="ws-price">
    padding:0;
                            <span class="ws-new-price">
    margin:0;
                                ۴,۲۰۰,۰۰۰ تومان
}
                            </span>
                        </div>


                    </div>
.pd-footer li{
    margin:4px 0;
}


                </article>
.pd-footer-bottom{


    margin-top:17px;


                <article class="ws-product-card">
    padding-top:13px;


                    <div class="ws-product-image">
    border-top:
                        <img
        1px solid
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+5"
        var(--border);
                            alt="پچ پنل پرفروش">
                    </div>


                    <div class="ws-product-info">
    text-align:center;


                        <h3 class="ws-product-title">
    color:var(--muted);
                            پچ پنل شبکه
                        </h3>


                        <div class="ws-price">
    font-size:.62rem;
                            <span class="ws-new-price">
}
                                ۱,۲۰۰,۰۰۰ تومان
                            </span>
                        </div>


                    </div>


                </article>
/* =========================================================
  MOBILE BOTTOM NAV
========================================================= */


.pd-mobile-nav{


                <article class="ws-product-card">
    position:fixed;


                    <div class="ws-product-image">
    z-index:99999;
                        <img
                            src="https://placehold.co/500x500/f8f9fa/0b3157?text=Best+6"
                            alt="ماژول فیبر نوری پرفروش">
                    </div>


                    <div class="ws-product-info">
    right:7px;
    left:7px;
    bottom:7px;


                        <h3 class="ws-product-title">
    height:67px;
                            ماژول فیبر نوری
                        </h3>


                        <div class="ws-price">
    display:flex;
                            <span class="ws-new-price">
                                ۹۹۰,۰۰۰ تومان
                            </span>
                        </div>


                    </div>
    align-items:center;
    justify-content:space-around;


                </article>
    background:
        rgba(63,32,88,.97);


            </div>
    border:
        1px solid
        rgba(255,255,255,.13);


        </div>
    border-radius:22px;


     </div>
     box-shadow:
        0 8px 35px
        rgba(63,32,88,.28);


</section>
    direction:rtl;
}


.pd-mobile-nav a{


<!-- ======================================================
    min-width:55px;
    ARTICLES
====================================================== -->


<section class="ws-section" aria-labelledby="articles-title">
    height:58px;


     <div class="ws-section-head">
     display:flex;


        <h2 id="articles-title" class="ws-section-title">
    flex-direction:column;
            مجله تخصصی برق و شبکه
        </h2>


        <a href="#" class="ws-more">
    align-items:center;
            مشاهده مقالات
    justify-content:center;
        </a>


     </div>
     gap:1px;


    border-radius:16px;


     <div class="ws-articles">
     color:
        rgba(255,255,255,.76);


        <article class="ws-article">
    font-size:.58rem;


            <div class="ws-article-image">
    font-weight:800;


                <img
    transition:.2s ease;
                    src="https://placehold.co/800x500/e9eef3/0b3157?text=Article+1"
}
                    alt="راهنمای خرید تجهیزات شبکه">


            </div>
.pd-mobile-nav a span{


            <div class="ws-article-content">
    width:30px;
    height:30px;


                <h3>
    display:flex;
                    راهنمای خرید تجهیزات شبکه برای ساختمان
                </h3>


                <p>
    align-items:center;
                    با مهم‌ترین نکات انتخاب تجهیزات شبکه مناسب
    justify-content:center;
                    برای پروژه‌های مختلف آشنا شوید.
                </p>


                <a href="#" class="ws-read">
    border-radius:11px;
                    مطالعه مقاله ←
                </a>


            </div>
    font-size:1rem;
}


        </article>
.pd-mobile-nav a.active{


    color:#fff;
}


        <article class="ws-article">
.pd-mobile-nav a.active span{


            <div class="ws-article-image">
    background:var(--pink);


                <img
    color:#fff;
                    src="https://placehold.co/800x500/e9eef3/0b3157?text=Article+2"
                    alt="تفاوت کابل شبکه CAT6 و CAT6A">


            </div>
    box-shadow:
        0 5px 15px
        rgba(232,91,155,.35);
}


            <div class="ws-article-content">


                <h3>
/* =========================================================
                    تفاوت کابل شبکه CAT6 و CAT6A چیست؟
  TABLET
                </h3>
========================================================= */


                <p>
@media (min-width:700px){
                    مقایسه سرعت، پهنای باند و کاربرد انواع کابل شبکه
                    برای انتخاب بهتر.
                </p>


                <a href="#" class="ws-read">
    .positive-donation-page{
                    مطالعه مقاله ←
        padding:15px;
                </a>
        font-size:16px;
    }


            </div>
    .pd-header{
        padding:13px 18px;
    }


        </article>
    .pd-menu{


        display:flex;


         <article class="ws-article">
         align-items:center;


            <div class="ws-article-image">
        gap:3px;


                <img
        margin-right:auto;
                    src="https://placehold.co/800x500/e9eef3/0b3157?text=Article+3"
    }
                    alt="آشنایی با فیبر نوری">


            </div>
    .pd-menu a{


            <div class="ws-article-content">
        padding:8px 10px;


                <h3>
        border-radius:12px;
                    فیبر نوری چیست و چه کاربردی دارد؟
                </h3>


                <p>
        color:var(--purple);
                    آشنایی با انواع فیبر نوری و کاربردهای آن
                    در شبکه‌های ارتباطی.
                </p>


                <a href="#" class="ws-read">
        font-size:.72rem;
                    مطالعه مقاله ←
                </a>


            </div>
        font-weight:900;
    }


        </article>
    .pd-header-btn{


    </div>
        display:inline-flex;


</section>
        padding:8px 14px;


        border-radius:13px;


<!-- ======================================================
        background:var(--purple);
    CTA
====================================================== -->


<section class="ws-cta">
        color:#fff;


    <h2>
         font-size:.7rem;
         برای انتخاب تجهیزات مناسب نیاز به مشاوره دارید؟
    </h2>


    <p>
         font-weight:900;
        کارشناسان ما برای انتخاب محصول مناسب پروژه،
     }
         بررسی مشخصات فنی و ارائه پیشنهاد خرید در کنار شما هستند.
     </p>


     <a href="#" class="ws-cta-btn">
     .pd-hero{
         <i class="fa-solid fa-phone"></i>
         min-height:400px;
        دریافت مشاوره تخصصی
     }
     </a>


</section>
    .pd-hero-content{
        min-height:400px;
        padding:45px;
    }


    .pd-hero h1{
        font-size:2.25rem;
    }


<!-- ======================================================
    .pd-hero p{
    FOOTER
        font-size:.95rem;
====================================================== -->
    }


<footer class="ws-footer">
    .pd-quick{
        grid-template-columns:
            repeat(4,1fr);
    }


     <div class="ws-footer-grid">
     .pd-start-options{
        grid-template-columns:
            repeat(4,1fr);
    }


         <div>
    .pd-donation-grid{
         grid-template-columns:
            repeat(3,1fr);
    }


            <h3>درباره مجموعه</h3>
    .pd-donation-card{
        min-height:320px;
    }


            <p>
    .pd-choice{
                فروشگاه تخصصی تجهیزات برق، شبکه، فیبر نوری،
        grid-template-columns:
                سرور و تجهیزات زیرساخت با ارائه مشاوره تخصصی
            repeat(2,1fr);
                و خدمات پس از فروش.
    }
            </p>


            <p>
    .pd-choice-card{
                <i class="fa-solid fa-location-dot"></i>
        min-height:215px;
                تهران، خیابان نمونه، پلاک ۱۲
    }
            </p>


            <p>
    /* دسکتاپ چندستونه */
                <i class="fa-solid fa-phone"></i>
                ۰۲۱-۱۲۳۴۵۶۷۸
            </p>


        </div>
    .pd-image-slider{


        grid-template-columns:
            repeat(4,1fr);


         <div>
         gap:12px;
    }


            <h3>دسترسی سریع</h3>
    .pd-image-slide{


            <ul>
        height:205px;
    }


                <li><a href="#">صفحه اصلی</a></li>
    .pd-benefits{
                <li><a href="#">محصولات</a></li>
                <li><a href="#">دسته‌بندی‌ها</a></li>
                <li><a href="#">تخفیف‌ها</a></li>


             </ul>
        grid-template-columns:
             repeat(3,1fr);
    }


        </div>
    .pd-steps{


        grid-template-columns:
            repeat(4,1fr);
    }


        <div>
    .pd-step{


            <h3>خدمات مشتریان</h3>
        display:block;


            <ul>
        text-align:center;
    }


                <li><a href="#">تماس با ما</a></li>
    .pd-step-number{
                <li><a href="#">قوانین خرید</a></li>
                <li><a href="#">روش‌های ارسال</a></li>
                <li><a href="#">پرسش‌های متداول</a></li>


            </ul>
        margin:0 auto 8px;
    }


        </div>
    .pd-articles{


        grid-template-columns:
            repeat(3,1fr);
    }


        <div>
    .pd-footer-grid{


             <h3>شبکه‌های اجتماعی</h3>
        grid-template-columns:
             1.5fr 1fr 1fr;
    }


            <ul>
    /* حذف منوی موبایل */


                <li>
    .pd-mobile-nav{
                    <a href="#">
        display:none;
                        <i class="fa-brands fa-instagram"></i>
    }
                        اینستاگرام
                    </a>
                </li>


                <li>
    .pd-footer{
                    <a href="#">
        padding-bottom:24px;
                        <i class="fa-brands fa-telegram"></i>
    }
                        تلگرام
}
                    </a>
                </li>


                <li>
                    <a href="#">
                        <i class="fa-brands fa-whatsapp"></i>
                        واتساپ
                    </a>
                </li>


            </ul>
/* =========================================================
  DESKTOP
========================================================= */


        </div>
@media (min-width:1050px){


     </div>
     .pd-section{
        margin-top:46px;
    }


    .pd-title{
        margin-bottom:26px;
    }


     <div class="ws-footer-bottom">
     .pd-title h2{
        font-size:1.7rem;
    }


         © ۱۴۰۵ تمامی حقوق این وب‌سایت محفوظ است.
    .pd-title p{
         font-size:.9rem;
    }


     </div>
     .pd-hero{


</footer>
        min-height:470px;


</div>
        border-radius:38px;
    }


    .pd-hero-content{


<!-- ======================================================
        min-height:470px;
    SLIDER JAVASCRIPT
====================================================== -->


<script>
        padding:60px;
    }


document.addEventListener("DOMContentLoaded",function(){
    .pd-hero h1{


    /* ============================================
        font-size:2.7rem;
      HERO SLIDER
     }
     ============================================ */


     const hero=document.querySelector("[data-hero-slider]");
     .pd-hero p{


     if(hero){
        font-size:1rem;
     }


        const track=hero.querySelector(".ws-hero-track");
    .pd-donation{
        const slides=hero.querySelectorAll(".ws-hero-slide");
        const dotsBox=hero.querySelector(".ws-hero-dots");


         let current=0;
         padding:37px 20px 30px;
        let timer;


         slides.forEach(function(slide,index){
         border-radius:40px;
    }


            const dot=document.createElement("button");
    .pd-donation::before{


            dot.type="button";
        width:520px;
            dot.className="ws-hero-dot";
        height:470px;


            if(index===0){
        top:-155px;
                dot.classList.add("active");
        right:-120px;
            }
    }


            dot.setAttribute(
    .pd-donation::after{
                "aria-label",
                "نمایش اسلاید "+(index+1)
            );


            dot.addEventListener("click",function(){
        width:430px;
                goToSlide(index);
        height:350px;
                restart();
            });


            dotsBox.appendChild(dot);
        bottom:-160px;
        left:-120px;
    }


        });
    .pd-donation-card{


         const dots=dotsBox.querySelectorAll(".ws-hero-dot");
         min-height:390px;


         function goToSlide(index){
         border-radius:33px;
    }


            current=index;
    .pd-donation-card h3{


            track.style.transform=
        font-size:1.2rem;
                "translateX(-"+(current*100)+"%)";
    }


            dots.forEach(function(dot,i){
    .pd-donation-card p{


                dot.classList.toggle(
        font-size:.8rem;
                    "active",
    }
                    i===current
                );


            });
    .pd-image-slide{


         }
         height:230px;


         function next(){
         border-radius:29px;
    }


            current=(current+1)%slides.length;
    .pd-benefits{


             goToSlide(current);
        grid-template-columns:
             repeat(6,1fr);
    }


        }
    .pd-article-image{


         function start(){
         height:185px;
    }


            timer=setInterval(
    .pd-article-body h3{
                next,
                4500
            );


         }
         font-size:.95rem;
    }
}


        function restart(){


            clearInterval(timer);
/* =========================================================
            start();
  HOVER
========================================================= */


        }
@media (hover:hover){


        hero.addEventListener(
    .pd-quick-card,
            "mouseenter",
    .pd-donation-card,
            function(){
    .pd-choice-card,
                clearInterval(timer);
    .pd-benefit,
             }
    .pd-step,
        );
    .pd-article{
 
        transition:
             transform .22s ease,
            box-shadow .22s ease;
    }


        hero.addEventListener(
    .pd-quick-card:hover,
            "mouseleave",
    .pd-donation-card:hover,
            function(){
    .pd-choice-card:hover,
                restart();
    .pd-benefit:hover,
            }
    .pd-step:hover,
        );
    .pd-article:hover{


         start();
         transform:translateY(-4px);


        box-shadow:
            0 18px 38px
            rgba(88,49,116,.15);
     }
     }


    .pd-menu a:hover{


    /* ============================================
        background:var(--pink-light);
      TWO ROW PRODUCT SLIDERS
    ============================================ */


    document.querySelectorAll(
        color:var(--pink-dark);
        "[data-product-slider]"
     }
     ).forEach(function(slider){
}


        const track=
            slider.querySelector(".ws-product-track");


        const prev=
/* =========================================================
            slider.querySelector(".ws-slider-prev");
  VERY SMALL MOBILE
========================================================= */


        const next=
@media (max-width:390px){
            slider.querySelector(".ws-slider-next");


         if(!track) return;
    .positive-donation-page{
         padding:6px;
    }


         let position=0;
    .pd-brand-text strong{
        let autoTimer;
         font-size:.84rem;
    }


         function getStep(){
    .pd-brand-text small{
         font-size:.65rem;
    }


            const card=
    .pd-hero{
                track.querySelector(".ws-product-card");
        min-height:285px;
    }


            if(!card) return 250;
    .pd-hero-content{
        min-height:285px;
        padding:23px 16px;
    }


            return card.getBoundingClientRect().width+10;
    .pd-hero h1{
        font-size:1.5rem;
    }


         }
    .pd-hero p{
         font-size:.8rem;
    }


         function move(direction){
    .pd-donation-card{
         min-height:240px;
    }


            const step=getStep();
    .pd-mobile-nav{
        height:64px;
    }


            position+=direction*step;
    .pd-mobile-nav a{
        min-width:49px;
        font-size:.54rem;
    }
}


            if(position>0){
</style>
                position=0;
            }


            const maxScroll=
                Math.max(
                    0,
                    track.scrollWidth-slider.clientWidth
                );


            if(Math.abs(position)>maxScroll){
<!-- =======================================================
                position=-maxScroll;
    HEADER
            }
======================================================= -->


            track.style.transform=
<header class="pd-header">
                "translateX("+position+"px)";


        }
    <a href="#" class="pd-brand">


         if(prev){
         <span class="pd-logo">
            +
        </span>


            prev.addEventListener(
        <span class="pd-brand-text">
                "click",
                function(){
                    move(1);
                    restart();
                }
            );


        }
            <strong>
                گروه اهدای مثبت بخشنده
            </strong>


        if(next){
            <small>
                با مدیریت آقای بخشنده
            </small>


            next.addEventListener(
        </span>
                "click",
                function(){
                    move(-1);
                    restart();
                }
            );


        }
    </a>


        function start(){


            autoTimer=setInterval(
    <nav class="pd-menu">
                function(){
                    move(-1);


                    if(
        <a href="#donation">
                        Math.abs(position)>=
            خدمات اهدا
                        track.scrollWidth-slider.clientWidth
        </a>
                    ){
                        position=0;
                        track.style.transform=
                            "translateX(0)";
                    }


                },
        <a href="#choice">
                3500
            مسیر خدمات
            );
        </a>


         }
         <a href="#about">
            درباره ما
        </a>


         function restart(){
         <a href="#articles">
            مجله
        </a>


             clearInterval(autoTimer);
        <a href="#faq">
            start();
             سوالات متداول
        </a>


        }
    </nav>


        slider.addEventListener(
            "mouseenter",
            function(){
                clearInterval(autoTimer);
            }
        );


        slider.addEventListener(
    <a href="#contact"
            "mouseleave",
      class="pd-header-btn">
            function(){
        درخواست مشاوره
                restart();
    </a>
            }
 
        );
</header>


        start();


    });
<!-- =======================================================
    HERO
======================================================= -->


});
<section class="pd-hero">


</script>
    <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>
</html>

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

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

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

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

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

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

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

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

خدمات اهدا

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

انتخاب مسیر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ارتباط با ما

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

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