پرش به محتوا

تست۶ - فراغیب

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html>


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


<style>
<style>


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


.wiki-store{
.positive-donation-page{
    --ws-primary:#0b3157;
    --ws-primary-dark:#071f38;
    --ws-secondary:#238b68;
    --ws-secondary-dark:#176b50;
    --ws-gold:#c99a2e;
    --ws-gold-light:#f7edcf;
    --ws-bg:#f5f7fa;
    --ws-card:#fff;
    --ws-text:#17202a;
    --ws-muted:#697586;
    --ws-border:#e7ebef;
    --ws-radius:18px;
    --ws-shadow:0 8px 28px rgba(0,0,0,.07);


    --purple:#583174;
    --purple-dark:#3f2058;
    --purple-light:#eee3f5;
    --pink:#e85b9b;
    --pink-dark:#d84788;
    --pink-light:#fce8f1;
    --lavender:#f7f0fa;
    --lavender-2:#eee2f4;
    --text:#3d3443;
    --muted:#706575;
    --white:#fff;
    --border:#e8dce9;
    --gold:#c9a04a;
    --shadow:0 10px 35px rgba(88,49,116,.10);
    --shadow-soft:0 6px 22px rgba(88,49,116,.08);
    direction:rtl;
     width:100%;
     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{
.pd-title span{
     background:var(--ws-primary-dark);
     display:inline-flex;
    color:#fff;
    border-radius:0 0 14px 14px;
    padding:8px 12px;
    margin-bottom:10px;
}
 
.ws-topbar-inner{
    display: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);
 
     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;
 
     align-items:center;
     padding:11px 14px;
}


.ws-logo{
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:space-between;
    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{
     box-shadow:var(--shadow-soft);
    display:block;
     font-size:10px;
    color:var(--ws-secondary);
    margin-top:2px;
}
}


.pd-brand{


/* =========================================================
    display:flex;
  SEARCH
    align-items:center;
========================================================= */


.ws-search{
     gap:10px;
     width:100%;
    position:relative;
}
}


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


.ws-search input:focus{
    flex:0 0 47px;
     border-color:var(--ws-secondary);
 
    background:#fff;
    display:flex;
}
    align-items:center;
    justify-content:center;
 
     border-radius:16px;
 
    background:
        linear-gradient(
            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;
    font-size:1.55rem;
    font-weight:900;
}
}


.pd-brand-text strong{


/* =========================================================
    display:block;
  ACTIONS
 
========================================================= */
    color:var(--purple);
 
    font-size:.95rem;


.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;


     display:flex;
     color:var(--muted);
    align-items:center;
    justify-content:center;
    flex-direction:column;


    gap:3px;
     font-size:.72rem;
    color:var(--ws-primary);
     font-size:11px;
}
}


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




/* =========================================================
/* =========================================================
   NAV
   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;
}


.ws-nav-list{
     overflow:hidden;
     list-style:none;
    margin:0;
    padding:0;
    min-width:max-content;


     display:flex;
     border-radius:30px;
    align-items:center;
}


.ws-nav-list a{
     background:
     display:flex;
    align-items:center;
    gap:7px;
    padding:13px 15px;


    color:#fff;
        linear-gradient(
    font-size:13px;
            90deg,
    font-weight:700;
            rgba(63,32,88,.88),
    white-space:nowrap;
            rgba(88,49,116,.55),
}
            rgba(232,91,155,.18)
        ),


.ws-nav-list a:hover{
        url("YOUR-BANNER-IMAGE-URL")
    background:rgba(255,255,255,.1);
        center center / cover no-repeat;
}


.ws-nav-list .ws-special{
    box-shadow:var(--shadow);
    color:#ffe6a1;
}
}


.pd-hero::before{


/* =========================================================
    content:"";
  SECTION
========================================================= */


.ws-section{
     position:absolute;
     margin-top:22px;
}


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


.ws-section-title{
     border-radius:50%;
    margin:0;
    color:var(--ws-primary);
    font-size:19px;
     font-weight:900;
}


.ws-section-title::before{
     background:
     content:"";
        rgba(232,91,155,.20);
    display:inline-block;


     width:5px;
     top:-110px;
     height:21px;
     right:-80px;
}


    border-radius:5px;
.pd-hero-content{
    background:var(--ws-gold);


     margin-left:8px;
     position:relative;
     vertical-align:-4px;
     z-index:2;
}


.ws-more{
     min-height:310px;
    color:var(--ws-secondary);
    font-size:12px;
     font-weight:700;
}


    padding:28px 20px;


/* =========================================================
  QUICK CATEGORIES
========================================================= */
.ws-category-scroll{
     display:flex;
     display:flex;
    gap:10px;


     overflow-x:auto;
     flex-direction:column;


     padding:3px 2px 8px;
     justify-content:center;


     scrollbar-width:none;
     align-items:flex-start;
}
}


.ws-category-scroll::-webkit-scrollbar{
.pd-hero-badge{
    display:none;
}


.ws-category{
    display:inline-flex;
    flex:0 0 112px;


     background:#fff;
     padding:6px 14px;


    border:1px solid var(--ws-border);
     border-radius:30px;
     border-radius:16px;


     padding:13px 8px;
     background:
        rgba(255,255,255,.15);
 
    border:
        1px solid
        rgba(255,255,255,.4);


     text-align:center;
     color:#fff;


     box-shadow:0 4px 15px rgba(0,0,0,.04);
     font-size:.78rem;
}


.ws-category:hover{
     margin-bottom:9px;
    transform:translateY(-3px);
     border-color:var(--ws-secondary);
}
}


.ws-category-icon{
.pd-hero h1{
    width:55px;
    height:55px;


     margin:0 auto 8px;
     margin:0;


     border-radius:50%;
     color:#fff;


     background:#eef7f3;
     font-size:1.8rem;


     display:grid;
     line-height:1.65;
    place-items:center;


     color:var(--ws-secondary);
     max-width:700px;
    font-size:23px;
}
}


.ws-category strong{
.pd-hero h1 strong{
    display:block;
     color:#f7a9ca;
     color:var(--ws-text);
    font-size:13px;
}
}


.pd-hero p{


/* =========================================================
    max-width:650px;
  HERO SLIDER
  تصاویر بدون Crop
========================================================= */


.ws-hero{
     margin:8px 0 16px;
     position:relative;
    width:100%;
    max-width:100%;


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


     border-radius:20px;
     font-size:.88rem;


     background:#edf0f3;
     line-height:2;
}


    box-shadow:var(--ws-shadow);
.pd-buttons{


    /*
      جلوگیری از تغییر عرض یا بیرون‌زدگی
    */
    contain:layout paint;
}
.ws-hero-track{
     display:flex;
     display:flex;


     direction:ltr;
     flex-wrap:wrap;


     width:100%;
     gap:8px;
 
    transition:
        transform .65s ease;
}
}


.ws-hero-slide{
.pd-btn{


     flex:0 0 100%;
     min-height:44px;


     width:100%;
     display:inline-flex;
    min-width:100%;


     /*
     align-items:center;
      ارتفاع توسط JS از نسبت واقعی عکس
     justify-content:center;
      تعیین می‌شود.
    */
     height:auto;


     position:relative;
     padding:8px 18px;


     display:flex;
     border-radius:14px;
    align-items:center;
    justify-content:center;


     overflow:hidden;
     font-size:.78rem;


     background:#edf0f3;
     font-weight:900;
}
}


.ws-hero-slide img{
.pd-btn-main{


     display:block;
     background:#fff;


     /*
     color:var(--purple);
      عرض همیشه برابر عرض اسلاید
}
    */
    width:100%;


    /*
.pd-btn-light{
      ارتفاع خودکار
      تا نسبت اصلی تصویر حفظ شود.
    */
    height:auto;


     /*
     color:#fff;
      هیچ Crop اتفاق نمی‌افتد.
    */
    object-fit:contain;


     object-position:center;
     border:
        1px solid
        rgba(255,255,255,.45);


     /*
     background:
      جلوگیری از فضای اضافه ناشی از inline image
        rgba(255,255,255,.12);
    */
    vertical-align:middle;
}
}




/*
/* =========================================================
   اگر تصویر خیلی بلند باشد، روی نمایشگرهای
   QUICK SERVICES
  کوچک بیش از حد ارتفاع نگیرد.
========================================================= */
*/


@media (max-width:599px){
.pd-quick{


     .ws-hero-slide img{
     display:grid;
        width:100%;
        height:auto;
        max-height:65vw;
        object-fit:contain;
    }


}
     grid-template-columns:
 
         repeat(2,1fr);
@media (min-width:600px){
 
     .ws-hero-slide img{
        width:100%;
         height:auto;
        max-height:55vw;
        object-fit:contain;
    }


    gap:10px;
}
}


.pd-quick-card{


/* =========================================================
    min-height:115px;
  HERO DOTS
========================================================= */


.ws-hero-dots{
     background:#fff;
     position:absolute;


     bottom:10px;
     border:
    left:50%;
        1px solid
        var(--border);


     transform:translateX(-50%);
     border-radius:21px;


     display:flex;
     display:flex;


     gap:6px;
     flex-direction:column;


     direction:ltr;
     align-items:center;


     z-index:5;
     justify-content:center;
}


.ws-hero-dot{
     text-align:center;
    width:8px;
    height:8px;
 
    border:0;
    padding:0;
 
     border-radius:50%;


     background:rgba(255,255,255,.8);
     padding:11px;


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


.ws-hero-dot.active{
.pd-quick-icon{
    width:22px;


     border-radius:10px;
     width:44px;
    height:44px;


     background:var(--ws-gold);
     border-radius:15px;
}


    display:flex;


/* =========================================================
    align-items:center;
  PRODUCT SLIDER
    justify-content:center;
  کاملاً Responsive
========================================================= */


.ws-product-slider{
    background:var(--purple-light);


     position:relative;
     color:var(--purple);


     width:100%;
     font-size:1.15rem;
    max-width:100%;


     overflow:hidden;
     margin-bottom:5px;
 
    padding:3px 0 8px;
}
}


.pd-quick-card:nth-child(2)
.pd-quick-icon{


.ws-product-track{
    background:var(--pink-light);


     display:flex;
     color:var(--pink);
}


    flex-direction:column;
.pd-quick-card strong{


     gap:12px;
     color:var(--purple);


     direction:ltr;
     font-size:.85rem;
}


    width:100%;
.pd-quick-card small{


     transition:
     color:var(--muted);
        transform .65s ease;


     will-change:transform;
     font-size:.72rem;
}
}




/*
/* =========================================================
   هر ردیف تمام عرض واقعی کانتینر را می‌گیرد
   START
*/
========================================================= */


.ws-product-row{
.pd-start{


     display:grid;
     padding:23px 16px;


     width:100%;
     background:
     max-width:100%;
        linear-gradient(
            135deg,
            #fff,
            var(--lavender)
        );
 
     border:
        1px solid
        var(--border);


     direction:rtl;
     border-radius:27px;


     gap:10px;
     box-shadow:var(--shadow-soft);


     /*
     text-align:center;
      موبایل:
      2 کارت کامل
    */
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}
}


.pd-start h2{


/* =========================================================
    margin:0;
  PRODUCT CARD
========================================================= */


.ws-product-card{
    color:var(--purple);


     width:100%;
     font-size:1.25rem;
    min-width:0;
}
    max-width:100%;


    background:#fff;
.pd-start p{


     border:1px solid var(--ws-border);
     margin:6px auto 15px;


     border-radius:16px;
     color:var(--muted);


     overflow:hidden;
     font-size:.82rem;


     box-shadow:
     max-width:650px;
        0 4px 16px rgba(0,0,0,.045);
}


    direction:rtl;
.pd-start-options{


     display:flex;
     display:grid;
    flex-direction:column;


     transition:
     grid-template-columns:
         transform .2s ease,
         repeat(2,1fr);
        box-shadow .2s ease;
}


.ws-product-card:hover{
    gap:9px;
}


    transform:translateY(-4px);
.pd-start-option{


     box-shadow:
     padding:13px 8px;
        0 10px 25px rgba(0,0,0,.09);
}


    background:#fff;


/* =========================================================
    border:
  PRODUCT IMAGE
        1px solid
  هر تصویری انتخاب شود کامل دیده می‌شود
        var(--border);
========================================================= */


.ws-product-image{
    border-radius:18px;


     width:100%;
     color:var(--purple);


     /*
     font-size:.76rem;
      مربع استاندارد و مستقل از نسبت تصویر اصلی
    */
    aspect-ratio:1 / 1;


     min-height:0;
     font-weight:900;
}


    display:flex;


    align-items:center;
/* =========================================================
    justify-content:center;
  DONATION SERVICES
========================================================= */


    background:#fff;
.pd-donation{


     padding:10px;
     position:relative;


     overflow:hidden;
     overflow:hidden;
}


.ws-product-image img{
    padding:27px 8px 22px;


     display:block;
     border-radius:34px;


     width:100%;
     background:
    height:100%;
        linear-gradient(
            180deg,
            #fff,
            #fff8fc
        );
}


    max-width:100%;
.pd-donation::before{
    max-height:100%;


     /*
     content:"";
      مهم‌ترین ویژگی:
      تصویر هرگز Crop نمی‌شود.
    */
    object-fit:contain;


     object-position:center;
     position:absolute;
}


    width:390px;
    height:390px;


/* =========================================================
    border-radius:
  PRODUCT INFO
        48% 52% 62% 38% /
========================================================= */
        42% 39% 61% 58%;


.ws-product-info{
    background:


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


     padding:10px;
     top:-110px;
    right:-100px;


     display:flex;
     transform:rotate(-15deg);
    flex-direction:column;


     flex:1;
     pointer-events:none;
}
}


.ws-product-title{
.pd-donation::after{
 
    content:"";


     margin:0 0 7px;
     position:absolute;


     min-height:40px;
     width:320px;
    height:280px;


     color:var(--ws-text);
     border-radius:
        60% 40% 42% 58% /
        55% 45% 55% 45%;


     font-size:12px;
     background:
        rgba(88,49,116,.09);


     line-height:1.8;
     bottom:-125px;
    left:-90px;


     font-weight:700;
     transform:rotate(15deg);


     display:-webkit-box;
     pointer-events:none;
}


    -webkit-line-clamp:2;
.pd-donation .pd-title,
.pd-donation-grid{


     -webkit-box-orient:vertical;
     position:relative;


     overflow:hidden;
     z-index:2;
}
}


.ws-brand{
.pd-donation-grid{


     color:var(--ws-muted);
     display:grid;


     font-size:10px;
     grid-template-columns:1fr;


     margin-bottom:7px;
     gap:13px;
}
}


.ws-price{
.pd-donation-card{


     display:flex;
     position:relative;


     align-items:center;
     min-height:270px;


     justify-content:space-between;
     overflow:hidden;


     gap:5px;
     background:#fff;


     margin-top:auto;
     border:
}
        1px solid
        rgba(232,91,155,.22);


.ws-new-price{
    border-radius:29px;


     color:var(--ws-primary);
     box-shadow:
        0 12px 30px
        rgba(88,49,116,.11);


     font-size:13px;
     padding:15px;


     font-weight:900;
     display:flex;
}


.ws-discount{
    flex-direction:column;


     background:#fff1f1;
     justify-content:flex-end;
}


    color:#d64545;
.pd-donation-image{


     border-radius:6px;
     position:absolute;


     padding:3px 5px;
     inset:0;


     font-size:9px;
     z-index:0;
 
    font-weight:800;
}
}


.ws-product-actions{
.pd-donation-image img{


     display:flex;
     width:100%;
    height:100%;


     gap:6px;
     object-fit:cover;


     margin-top:9px;
     object-position:center;
}
}


.ws-cart{
.pd-donation-image::after{


     flex:1;
     content:"";


     border:0;
     position:absolute;


     border-radius:8px;
     inset:0;


     padding:8px;
     background:
        linear-gradient(
            180deg,
            rgba(63,32,88,.02) 15%,
            rgba(63,32,88,.82) 100%
        );
}


    background:var(--ws-secondary);
.pd-donation-content{


     color:#fff;
     position:relative;


     font-family:inherit;
     z-index:2;


     font-size:10px;
     padding:5px;


     cursor:pointer;
     color:#fff;
}
}


.ws-favorite{
.pd-donation-icon{


     width:34px;
     width:47px;
     flex:0 0 34px;
     height:47px;


     border:1px solid var(--ws-border);
     border-radius:16px;


     border-radius:8px;
     background:
        rgba(255,255,255,.93);


     background:#fff;
     color:var(--purple);


     color:var(--ws-primary);
     display:flex;
}


    align-items:center;
    justify-content:center;


/* =========================================================
    font-size:1.2rem;
  TABLET
========================================================= */


@media (min-width:600px){
    margin-bottom:7px;
}


    .wiki-store{
.pd-donation-card h3{
        padding-left:18px;
        padding-right:18px;
    }


     .ws-header-main{
     margin:0;
        grid-template-columns:180px 1fr;
    }


     .ws-actions{
     font-size:1.12rem;
        grid-column:1/-1;
    }


     /*
     color:#fff;
      سه کارت کامل
}
    */
    .ws-product-row{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .ws-product-image{
.pd-donation-card p{
        padding:12px;
    }


     .ws-category-grid{
     margin:5px 0 10px;
        grid-template-columns:repeat(3,1fr);
    }


     .ws-brands{
     color:
         grid-template-columns:repeat(4,1fr);
         rgba(255,255,255,.94);
    }


     .ws-articles{
     font-size:.78rem;
        grid-template-columns:repeat(2,1fr);
    }


     .ws-benefits{
     line-height:1.9;
        grid-template-columns:repeat(4,1fr);
    }
}
}


.pd-donation-actions{
    display:flex;


/* =========================================================
    gap:7px;
  DESKTOP
========================================================= */


@media (min-width:900px){
    flex-wrap:wrap;
}


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


     .ws-header-main{
     background:
         grid-template-columns:
         rgba(255,255,255,.94);
            190px minmax(300px,1fr) 245px;
    }


     .ws-actions{
     color:var(--purple);
        grid-column:auto;
    }


     /*
     padding:6px 10px;
      چهار کارت کامل
    */
    .ws-product-row{
        grid-template-columns:
            repeat(4,minmax(0,1fr));


        gap:12px;
    border-radius:12px;
    }


     .ws-product-image{
     font-size:.68rem;
        padding:13px;
    }


     .ws-category-grid{
     font-weight:900;
        grid-template-columns:repeat(5,1fr);
    }
 
    .ws-brands{
        grid-template-columns:repeat(6,1fr);
    }
 
    .ws-articles{
        grid-template-columns:repeat(3,1fr);
    }
 
    .ws-footer-grid{
        grid-template-columns:2fr 1fr 1fr 1fr;
    }
 
    .ws-section{
        margin-top:30px;
    }
 
    .ws-section-title{
        font-size:21px;
    }
}
}




/* =========================================================
/* =========================================================
   LARGE DESKTOP
   RECEIVER / DONOR
========================================================= */
========================================================= */


@media (min-width:1200px){
.pd-choice{


     .wiki-store{
     display:grid;
        padding-left:30px;
        padding-right:30px;
    }


     .ws-product-row{
     grid-template-columns:1fr;
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }


     .ws-category-grid{
     gap:12px;
        grid-template-columns:repeat(5,1fr);
    }
}
}


.pd-choice-card{


/* =========================================================
    position:relative;
  SECURITY CATEGORIES
========================================================= */


.ws-category-grid{
    overflow:hidden;


     display:grid;
     min-height:185px;


     grid-template-columns:
     border-radius:27px;
        repeat(2,minmax(0,1fr));


     gap:10px;
     padding:21px;
}


.ws-category-box{
    display:flex;


     background:#fff;
     flex-direction:column;


     border:1px solid var(--ws-border);
     justify-content:flex-end;


     border-radius:17px;
     box-shadow:var(--shadow);


     padding:12px;
     color:#fff;
}


    display:flex;
.pd-choice-card:first-child{


     align-items:center;
     background:
        linear-gradient(
            135deg,
            var(--purple),
            #80509c
        );
}


    gap:10px;
.pd-choice-card:last-child{


     min-height:88px;
     background:
 
        linear-gradient(
    transition:.2s;
            135deg,
            var(--pink),
            #ef83b1
        );
}
}


.ws-category-box:hover{
.pd-choice-card::before{


     border-color:var(--ws-secondary);
     content:"";


     transform:translateY(-3px);
     position:absolute;
}


.ws-category-box-icon{
    width:150px;
    height:150px;


     flex:0 0 52px;
     border-radius:50%;


     width:52px;
     background:
    height:52px;
        rgba(255,255,255,.10);


     border-radius:13px;
     top:-60px;
    left:-40px;
}


    display:grid;
.pd-choice-card h3{
    place-items:center;


     background:#edf7f3;
     position:relative;


     color:var(--ws-secondary);
     margin:0;


     font-size:22px;
     font-size:1.12rem;
}
}


.ws-category-box strong{
.pd-choice-card p{
 
    position:relative;


     display:block;
     margin:5px 0 11px;


     color:var(--ws-primary);
     font-size:.78rem;


     font-size:12px;
     color:
        rgba(255,255,255,.93);
}
}


.ws-category-box span{
.pd-choice-card a{


     display:block;
     position:relative;


     color:var(--ws-muted);
     width:max-content;


     font-size:10px;
     padding:7px 12px;


     line-height:1.8;
     border-radius:13px;


     margin-top:4px;
     background:#fff;
}


@media (min-width:600px){
    color:var(--purple);


     .ws-category-grid{
     font-size:.68rem;
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


     .ws-category-box{
     font-weight:900;
        min-height:110px;
    }
}
}


@media (min-width:900px){


    .ws-category-grid{
/* =========================================================
        grid-template-columns:
  همراهی و آگاهی
            repeat(5,minmax(0,1fr));
  MOBILE = VERTICAL
========================================================= */


        gap:13px;
.pd-image-slider{
    }


     .ws-category-box{
     display:grid;
        min-height:125px;


        padding:16px;
    grid-template-columns:1fr;


        flex-direction:column;
    gap:13px;


        justify-content:center;
    width:100%;
}


        text-align:center;
.pd-image-slide{
    }


     .ws-category-box-icon{
     width:100%;


        width:64px;
    min-width:0;
        height:64px;


        flex-basis:64px;
    height:190px;


        font-size:27px;
    position:relative;
    }


     .ws-category-box strong{
     overflow:hidden;
        font-size:14px;
    }


     .ws-category-box span{
     border-radius:26px;
        font-size:11px;
    }
}


    background:var(--purple);


/* =========================================================
    box-shadow:var(--shadow-soft);
  BRANDS
}
========================================================= */


.ws-brands{
.pd-image-slide img{


     display:grid;
     width:100%;
    height:100%;


     grid-template-columns:
     object-fit:cover;
        repeat(2,minmax(0,1fr));


     gap:9px;
     object-position:center;
}
}


.ws-brand-card{
.pd-image-slide::after{


     height:75px;
     content:"";


     border:1px solid var(--ws-border);
     position:absolute;


     border-radius:14px;
     inset:0;


     background:#fff;
     background:
        linear-gradient(
            transparent 30%,
            rgba(63,32,88,.75)
        );
}


    display:flex;
.pd-image-slide span{


     align-items:center;
     position:absolute;
    justify-content:center;


     padding:10px;
     z-index:2;


     overflow:hidden;
     right:16px;
}
    bottom:13px;


.ws-brand-card img{
     color:#fff;
 
     width:100%;
    height:100%;


     object-fit:contain;
     font-size:.82rem;


     object-position:center;
     font-weight:900;
}
}




/* =========================================================
/* =========================================================
   ARTICLES
   BENEFITS
========================================================= */
========================================================= */


.ws-articles{
.pd-benefits{


     display:grid;
     display:grid;


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


     gap:11px;
     gap:10px;
}
}


.ws-article{
.pd-benefit{


     background:#fff;
     background:#fff;


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


     border-radius:16px;
     border-radius:22px;
 
    padding:16px 9px;
 
    text-align:center;


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


.ws-article-image{
.pd-benefit-icon{


     width:100%;
     width:44px;
    height:44px;


     aspect-ratio:16/9;
     margin:0 auto 7px;


     background:#edf0f3;
     border-radius:15px;


     overflow:hidden;
     background:var(--purple-light);
}


.ws-article-image img{
    color:var(--purple);


     width:100%;
     display:flex;
    height:100%;


     display:block;
     align-items:center;
    justify-content:center;


     object-fit:contain;
     font-size:1rem;
}


    object-position:center;
.pd-benefit:nth-child(even)
}
.pd-benefit-icon{
 
.ws-article-content{
    padding:12px;
}
 
.ws-article h3{
 
    margin:0;


     color:var(--ws-primary);
     background:var(--pink-light);


     font-size:14px;
     color:var(--pink);
 
    line-height:1.8;
}
}


.ws-article p{
.pd-benefit strong{


     color:var(--ws-muted);
     display:block;
 
    font-size:11px;


     line-height:1.9;
     color:var(--purple);


     margin:6px 0 9px;
     font-size:.8rem;
}
}


.ws-read{
.pd-benefit small{


     color:var(--ws-secondary);
     color:var(--muted);


     font-size:11px;
     font-size:.68rem;
 
    font-weight:800;
}
}




/* =========================================================
/* =========================================================
   BENEFITS
   STEPS
========================================================= */
========================================================= */


.ws-benefits{
.pd-steps{


     display:grid;
     display:grid;


     grid-template-columns:
     grid-template-columns:1fr;
        repeat(2,minmax(0,1fr));


     gap:9px;
     gap:9px;
}
}


.ws-benefit{
.pd-step{
 
    min-height:105px;


     background:#fff;
     background:#fff;


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


     border-radius:16px;
     border-radius:21px;


     padding:13px 8px;
     padding:14px;


     text-align:center;
     display:flex;
}


.ws-benefit-icon{
    align-items:center;


     width:42px;
     gap:12px;
    height:42px;


     margin:0 auto 7px;
     box-shadow:var(--shadow-soft);
}


    border-radius:50%;
.pd-step-number{


     background:var(--ws-gold-light);
     width:44px;
    height:44px;


     color:var(--ws-gold);
     flex:0 0 44px;


     display:grid;
     border-radius:15px;


     place-items:center;
     background:var(--purple);


     font-size:19px;
     color:#fff;
}


.ws-benefit strong{
    display:flex;


     display:block;
     align-items:center;
    justify-content:center;


     font-size:12px;
     font-weight:900;


     color:var(--ws-primary);
     font-size:.9rem;
}
}


.ws-benefit span{
.pd-step:nth-child(2)
.pd-step-number{
    background:var(--pink);
}


    display:block;
.pd-step:nth-child(3)
 
.pd-step-number{
     margin-top:4px;
     background:#9b70b3;
}


    font-size:10px;
.pd-step:nth-child(4)
 
.pd-step-number{
     color:var(--ws-muted);
     background:var(--gold);
}
}


@media (min-width:600px){
.pd-step strong{


     .ws-benefits{
     display:block;
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }


     .ws-brands{
     color:var(--purple);
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }


     .ws-articles{
     font-size:.8rem;
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}
}


@media (min-width:900px){
.pd-step small{


     .ws-brands{
     color:var(--muted);
        grid-template-columns:
            repeat(6,minmax(0,1fr));
    }


     .ws-articles{
     font-size:.68rem;
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}
}




/* =========================================================
/* =========================================================
   CTA
   مجله اهدای مثبت
  MOBILE = VERTICAL
========================================================= */
========================================================= */


.ws-cta{
.pd-articles{


     margin-top:25px;
     display:grid;


     padding:22px 15px;
     grid-template-columns:1fr;


     border-radius:20px;
     gap:14px;


     background:
     width:100%;
        linear-gradient(
}
            135deg,
            var(--ws-primary-dark),
            var(--ws-primary)
        );


    color:#fff;
.pd-article{


     text-align:center;
     width:100%;
}


.ws-cta h2{
    min-width:0;


     margin:0 0 8px;
     overflow:hidden;


     font-size:20px;
     background:#fff;
}


.ws-cta p{
    border:
        1px solid
        var(--border);


     margin:0 auto 15px;
     border-radius:26px;


     max-width:650px;
     box-shadow:var(--shadow-soft);
}


    color:#e5ebf0;
.pd-article-image{


     font-size:12px;
     width:100%;


     line-height:2;
     height:180px;
 
    background:var(--lavender);
}
}


.ws-cta-btn{
.pd-article-image img{


     display:inline-flex;
     width:100%;
    height:100%;


     align-items:center;
     object-fit:cover;
    justify-content:center;


     gap:8px;
     object-position:center;
}


    background:var(--ws-gold);
.pd-article-body{


     color:#fff;
     padding:15px;
}


    padding:11px 22px;
.pd-article-body small{


     border-radius:10px;
     color:var(--pink-dark);


     font-size:12px;
     font-size:.68rem;


     font-weight:800;
     font-weight:900;
}
}


.pd-article-body h3{


/* =========================================================
    margin:5px 0;
  FOOTER
========================================================= */


.ws-footer{
    color:var(--purple);


     margin-top:25px;
     font-size:.9rem;


     background:var(--ws-primary-dark);
     line-height:1.8;
}


    color:#fff;
.pd-article-body p{


     border-radius:20px 20px 0 0;
     margin:0;


     padding:24px 15px 15px;
     color:var(--muted);
}


.ws-footer-grid{
    font-size:.7rem;


     display:grid;
     line-height:1.9;
}


    grid-template-columns:1fr;


    gap:20px;
/* =========================================================
}
  FAQ
========================================================= */


.ws-footer h3{
.pd-faq{


     margin:0 0 10px;
     display:grid;


     font-size:14px;
     gap:9px;
}
}


.ws-footer p,
.pd-faq details{
.ws-footer li,
.ws-footer a{


     color:#cbd5df;
     background:#fff;


     font-size:11px;
     border:
        1px solid
        var(--border);


     line-height:2;
     border-radius:19px;
}


.ws-footer ul{
    padding:13px 15px;


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


    padding:0;
.pd-faq summary{


     list-style:none;
     cursor:pointer;
}


.ws-footer i{
    color:var(--purple);


     color:var(--ws-gold);
     font-size:.78rem;


     width:20px;
     font-weight:900;
}
}


.ws-footer-bottom{
.pd-faq p{


     border-top:
     color:var(--muted);
        1px solid rgba(255,255,255,.1);


     margin-top:18px;
     font-size:.72rem;


     padding-top:12px;
     line-height:2;
 
    text-align:center;
 
    color:#9eabb7;


     font-size:10px;
     margin:9px 0 0;
}
 
@media (min-width:900px){
 
    .ws-footer-grid{
        grid-template-columns:
            2fr 1fr 1fr 1fr;
    }
}
}




/* =========================================================
/* =========================================================
   ACCESSIBILITY
   CTA
========================================================= */
========================================================= */


@media (prefers-reduced-motion:reduce){
.pd-cta{


     .ws-hero-track,
     position:relative;
    .ws-product-track,
    .ws-category,
    .ws-product-card,
    .ws-category-box,
    .ws-article{


        transition:none !important;
    overflow:hidden;
    }
}


</style>
    padding:32px 18px;


    border-radius:31px;


<div class="wiki-store">
    text-align:center;


    background:


<!-- ======================================================
        radial-gradient(
    TOP BAR
            circle at 85% 15%,
====================================================== -->
            rgba(232,91,155,.34),
            transparent 30%
        ),


<header class="ws-topbar">
        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );


<div class="ws-topbar-inner">
    box-shadow:var(--shadow);
}


<div class="ws-top-item">
.pd-cta::before{
<i class="fa-solid fa-headset"></i>
مشاوره تخصصی سیستم‌های امنیتی
</div>


<div class="ws-top-item">
    content:"";
<i class="fa-solid fa-clock"></i>
شنبه تا پنجشنبه ۹ تا ۲۰
</div>


<div class="ws-top-item">
    position:absolute;
<i class="fa-solid fa-phone"></i>
تماس با ARS
</div>


<div class="ws-top-item">
    font-size:160px;
<i class="fa-solid fa-shield-halved"></i>
راهکارهای هوشمند حفاظتی
</div>


</div>
    color:
        rgba(255,255,255,.04);


</header>
    left:-10px;
    bottom:-65px;
}


.pd-cta h2{


<!-- ======================================================
    position:relative;
    HEADER
====================================================== -->


<header class="ws-header">
    margin:0 0 6px;


<div class="ws-header-main">
    color:#fff;


<a href="#" class="ws-logo"
    font-size:1.35rem;
aria-label="صفحه اصلی دوربین مداربسته ARS">
}


<span class="ws-logo-icon">
.pd-cta p{
<i class="fa-solid fa-camera"></i>
</span>


<span>
    position:relative;
ARS
<small>
دوربین مداربسته و سیستم‌های امنیتی
</small>
</span>


</a>
    max-width:650px;


    margin:0 auto 15px;


<form class="ws-search" role="search">
    color:
        rgba(255,255,255,.88);


<input
    font-size:.76rem;
type="search"
placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
aria-label="جستجوی محصولات دوربین مداربسته">


<button type="submit" aria-label="جستجو">
    line-height:2;
}


<i class="fa-solid fa-magnifying-glass"></i>
.pd-cta a{


</button>
    position:relative;


</form>
    display:inline-flex;


    padding:9px 19px;


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


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


<i class="fa-regular fa-user"></i>
    color:var(--purple);


<span>
    font-size:.74rem;
حساب کاربری
</span>


</a>
    font-weight:900;
}


<a href="#" class="ws-action">


<i class="fa-regular fa-heart"></i>
/* =========================================================
  FOOTER
========================================================= */


<span>
.pd-footer{
علاقه‌مندی
</span>


</a>
    margin-top:30px;


<a href="#" class="ws-action">
    padding:24px 15px;


<i class="fa-solid fa-cart-shopping"></i>
    background:
        var(--lavender);


<span>
    border:
سبد خرید
        1px solid
</span>
        var(--border);


</a>
    border-radius:26px;


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


</div>
.pd-footer-grid{


    display:grid;


<nav class="ws-nav"
    grid-template-columns:1fr;
aria-label="منوی اصلی دوربین مداربسته ARS">


<ul class="ws-nav-list">
    gap:20px;
}


<li>
.pd-footer h3{
<a href="#">
<i class="fa-solid fa-bars"></i>
دسته‌بندی تجهیزات امنیتی
</a>
</li>


<li>
    margin:0 0 7px;
<a href="#">
دوربین مداربسته
</a>
</li>


<li>
    color:var(--purple);
<a href="#">
DVR و NVR
</a>
</li>


<li>
    font-size:.86rem;
<a href="#">
}
دزدگیر اماکن
</a>
</li>


<li>
.pd-footer p,
<a href="#">
.pd-footer li{
تجهیزات انتقال تصویر
</a>
</li>


<li>
    color:var(--muted);
<a href="#">
لوازم جانبی دوربین
</a>
</li>


<li>
    font-size:.68rem;
<a href="#" class="ws-special">
<i class="fa-solid fa-percent"></i>
پیشنهادهای ویژه
</a>
</li>


</ul>
    line-height:2;
}


</nav>
.pd-footer ul{


</header>
    list-style:none;


    padding:0;
    margin:0;
}


<!-- ======================================================
.pd-footer li{
    QUICK CATEGORIES
    margin:4px 0;
====================================================== -->
}


<section class="ws-section">
.pd-footer-bottom{


<div class="ws-section-head">
    margin-top:17px;


<h1 class="ws-section-title">
    padding-top:13px;
خرید دوربین مداربسته و تجهیزات امنیتی ARS
</h1>


<a href="#" class="ws-more">
    border-top:
مشاهده همه
        1px solid
</a>
        var(--border);


</div>
    text-align:center;


    color:var(--muted);


<div class="ws-category-scroll">
    font-size:.62rem;
}


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


<div class="ws-category-icon">
/* =========================================================
<i class="fa-solid fa-camera"></i>
  MOBILE BOTTOM NAV
</div>
========================================================= */


<strong>
.pd-mobile-nav{
دوربین مداربسته
</strong>


</a>
    position:fixed;


    z-index:99999;


<a href="#" class="ws-category">
    right:7px;
    left:7px;
    bottom:7px;


<div class="ws-category-icon">
    height:67px;
<i class="fa-solid fa-video"></i>
</div>


<strong>
    display:flex;
دوربین تحت شبکه
</strong>


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


    background:
        rgba(63,32,88,.97);


<a href="#" class="ws-category">
    border:
        1px solid
        rgba(255,255,255,.13);


<div class="ws-category-icon">
    border-radius:22px;
<i class="fa-solid fa-hard-drive"></i>
</div>


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


</a>
    direction:rtl;
}


.pd-mobile-nav a{


<a href="#" class="ws-category">
    min-width:55px;


<div class="ws-category-icon">
    height:58px;
<i class="fa-solid fa-bell"></i>
</div>


<strong>
    display:flex;
دزدگیر اماکن
</strong>


</a>
    flex-direction:column;


    align-items:center;
    justify-content:center;


<a href="#" class="ws-category">
    gap:1px;


<div class="ws-category-icon">
    border-radius:16px;
<i class="fa-solid fa-wifi"></i>
</div>


<strong>
    color:
انتقال تصویر
        rgba(255,255,255,.76);
</strong>


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


    font-weight:800;


<a href="#" class="ws-category">
    transition:.2s ease;
}


<div class="ws-category-icon">
.pd-mobile-nav a span{
<i class="fa-solid fa-plug"></i>
</div>


<strong>
    width:30px;
لوازم جانبی
    height:30px;
</strong>


</a>
    display:flex;


<a href="#" class="ws-category">
    align-items:center;
    justify-content:center;


<div class="ws-category-icon">
    border-radius:11px;
<i class="fa-solid fa-folder"></i>
</div>


<strong>
    font-size:1rem;
بایگانی حرفه ای
}
</strong>


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


</div>
    color:#fff;
}


</section>
.pd-mobile-nav a.active span{


    background:var(--pink);


<!-- ======================================================
    color:#fff;
    HERO
    فقط آدرس src تصاویر را عوض کنید
====================================================== -->


<section class="ws-section">
    box-shadow:
        0 5px 15px
        rgba(232,91,155,.35);
}


<div class="ws-hero"
data-hero-slider>


<div class="ws-hero-track">
/* =========================================================
  TABLET
========================================================= */


@media (min-width:700px){


<a href="#" class="ws-hero-slide">
    .positive-donation-page{
        padding:15px;
        font-size:16px;
    }


<img
    .pd-header{
src="https://dl.faraghaib.ir/m/260018-01/baner-01-02.png"
        padding:13px 18px;
alt="دوربین مداربسته ARS و سیستم‌های امنیتی"
    }
loading="eager">


</a>
    .pd-menu{


        display:flex;


<a href="#" class="ws-hero-slide">
        align-items:center;


<img
        gap:3px;
src="https://dl.faraghaib.ir/m/260018-01/baner-01-01.png"
alt="فروش و نصب دوربین مداربسته ARS"
loading="lazy">


</a>
        margin-right:auto;
    }


    .pd-menu a{


<a href="#" class="ws-hero-slide">
        padding:8px 10px;


<img
        border-radius:12px;
src="https://dl.faraghaib.ir/m/260018-01/260018-01-03.png"
alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
loading="lazy">


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


        font-size:.72rem;


</div>
        font-weight:900;
    }


<div class="ws-hero-dots"></div>
    .pd-header-btn{


</div>
        display:inline-flex;


</section>
        padding:8px 14px;


        border-radius:13px;


<!-- ======================================================
        background:var(--purple);
    SPECIAL PRODUCTS
    2 ROW
====================================================== -->


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


<div class="ws-section-head">
        font-size:.7rem;


<h2 class="ws-section-title">
        font-weight:900;
محصولات ویژه دوربین مداربسته ARS
    }
</h2>


<a href="#" class="ws-more">
    .pd-hero{
مشاهده همه محصولات
        min-height:400px;
</a>
    }


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


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


<div class="ws-product-slider"
    .pd-hero p{
data-product-slider>
        font-size:.95rem;
    }


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


    .pd-start-options{
        grid-template-columns:
            repeat(4,1fr);
    }


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


<div class="ws-product-row">
    .pd-donation-card{
        min-height:320px;
    }


    .pd-choice{
        grid-template-columns:
            repeat(2,1fr);
    }


<article class="ws-product-card">
    .pd-choice-card{
        min-height:215px;
    }


<div class="ws-product-image">
    /* دسکتاپ چندستونه */


<img
    .pd-image-slider{
src="https://dl.faraghaib.ir/m/260018-01/260018-01-29.jpg"
alt="دوربین مداربسته بولت ARS"
loading="lazy">


</div>
        grid-template-columns:
            repeat(4,1fr);


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


<div class="ws-brand">
    .pd-image-slide{
ARS
</div>


<h3 class="ws-product-title">
        height:205px;
دوربین مداربسته بولت با دید در شب
    }
</h3>


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


<span class="ws-new-price">
        grid-template-columns:
استعلام قیمت
            repeat(3,1fr);
</span>
    }


<span class="ws-discount">
    .pd-steps{
ویژه
</span>


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


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


<button class="ws-cart">
        display:block;
دریافت مشاوره
</button>


<button
        text-align:center;
class="ws-favorite"
    }
aria-label="افزودن به علاقه‌مندی">


<i class="fa-regular fa-heart"></i>
    .pd-step-number{


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


</div>
    .pd-articles{


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


</article>
    .pd-footer-grid{


        grid-template-columns:
            1.5fr 1fr 1fr;
    }


<article class="ws-product-card">
    /* حذف منوی موبایل */


<div class="ws-product-image">
    .pd-mobile-nav{
        display:none;
    }


<img
    .pd-footer{
src="https://dl.faraghaib.ir/m/260018-01/260018-01-25.jpg"
        padding-bottom:24px;
alt="دوربین مداربسته دام ARS"
    }
loading="lazy">
}


</div>


<div class="ws-product-info">
/* =========================================================
  DESKTOP
========================================================= */


<div class="ws-brand">
@media (min-width:1050px){
ARS
</div>


<h3 class="ws-product-title">
    .pd-section{
دوربین مداربسته دام مناسب محیط داخلی
        margin-top:46px;
</h3>
    }


<div class="ws-price">
    .pd-title{
        margin-bottom:26px;
    }


<span class="ws-new-price">
    .pd-title h2{
استعلام قیمت
        font-size:1.7rem;
</span>
    }


<span class="ws-discount">
    .pd-title p{
ویژه
        font-size:.9rem;
</span>
    }


</div>
    .pd-hero{


<div class="ws-product-actions">
        min-height:470px;


<button class="ws-cart">
        border-radius:38px;
دریافت مشاوره
    }
</button>


<button class="ws-favorite">
    .pd-hero-content{
<i class="fa-regular fa-heart"></i>
</button>


</div>
        min-height:470px;


</div>
        padding:60px;
    }


</article>
    .pd-hero h1{


        font-size:2.7rem;
    }


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


<div class="ws-product-image">
        font-size:1rem;
    }


<img
    .pd-donation{
src="https://dl.faraghaib.ir/m/260018-01/260018-01-49.jpg"
alt="دوربین مداربسته تحت شبکه IP"
loading="lazy">


</div>
        padding:37px 20px 30px;


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


<div class="ws-brand">
    .pd-donation::before{
ARS
</div>


<h3 class="ws-product-title">
        width:520px;
دوربین مداربسته تحت شبکه IP با کیفیت بالا
        height:470px;
</h3>


<div class="ws-price">
        top:-155px;
        right:-120px;
    }


<span class="ws-new-price">
    .pd-donation::after{
استعلام قیمت
</span>


<span class="ws-discount">
        width:430px;
ویژه
        height:350px;
</span>


</div>
        bottom:-160px;
        left:-120px;
    }


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


<button class="ws-cart">
        min-height:390px;
دریافت مشاوره
</button>


<button class="ws-favorite">
        border-radius:33px;
<i class="fa-regular fa-heart"></i>
    }
</button>


</div>
    .pd-donation-card h3{


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


</article>
    .pd-donation-card p{


        font-size:.8rem;
    }


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


<div class="ws-product-image">
        height:230px;


<img
        border-radius:29px;
src="https://dl.faraghaib.ir/m/260018-01/260018-01-50.jpg"
    }
alt="دوربین مداربسته دید در شب ARS"
loading="lazy">


</div>
    .pd-benefits{


<div class="ws-product-info">
        grid-template-columns:
            repeat(6,1fr);
    }


<div class="ws-brand">
    .pd-article-image{
ARS
</div>


<h3 class="ws-product-title">
        height:185px;
دوربین مداربسته دید در شب حرفه‌ای
    }
</h3>


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


<span class="ws-new-price">
        font-size:.95rem;
استعلام قیمت
    }
</span>
}


<span class="ws-discount">
ویژه
</span>


</div>
/* =========================================================
  HOVER
========================================================= */


<div class="ws-product-actions">
@media (hover:hover){


<button class="ws-cart">
    .pd-quick-card,
دریافت مشاوره
    .pd-donation-card,
</button>
    .pd-choice-card,
    .pd-benefit,
    .pd-step,
    .pd-article{


<button class="ws-favorite">
        transition:
<i class="fa-regular fa-heart"></i>
            transform .22s ease,
</button>
            box-shadow .22s ease;
    }


</div>
    .pd-quick-card:hover,
    .pd-donation-card:hover,
    .pd-choice-card:hover,
    .pd-benefit:hover,
    .pd-step:hover,
    .pd-article:hover{


</div>
        transform:translateY(-4px);


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


</div>
    .pd-menu a:hover{


        background:var(--pink-light);


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


<div class="ws-product-row">


/* =========================================================
  VERY SMALL MOBILE
========================================================= */


<article class="ws-product-card">
@media (max-width:390px){


<div class="ws-product-image">
    .positive-donation-page{
        padding:6px;
    }


<img
    .pd-brand-text strong{
src="https://dl.faraghaib.ir/m/260018-01/260018-01-51.jpg"
        font-size:.84rem;
alt="دستگاه DVR دوربین مداربسته"
    }
loading="lazy">


</div>
    .pd-brand-text small{
        font-size:.65rem;
    }


<div class="ws-product-info">
    .pd-hero{
        min-height:285px;
    }


<div class="ws-brand">
    .pd-hero-content{
ARS
        min-height:285px;
</div>
        padding:23px 16px;
    }


<h3 class="ws-product-title">
    .pd-hero h1{
دستگاه DVR حرفه‌ای برای سیستم مداربسته
        font-size:1.5rem;
</h3>
    }


<div class="ws-price">
    .pd-hero p{
        font-size:.8rem;
    }


<span class="ws-new-price">
    .pd-donation-card{
استعلام قیمت
        min-height:240px;
</span>
    }


<span class="ws-discount">
    .pd-mobile-nav{
ویژه
        height:64px;
</span>
    }


</div>
    .pd-mobile-nav a{
        min-width:49px;
        font-size:.54rem;
    }
}


<div class="ws-product-actions">
</style>


<button class="ws-cart">
دریافت مشاوره
</button>


<button class="ws-favorite">
<!-- =======================================================
<i class="fa-regular fa-heart"></i>
    HEADER
</button>
======================================================= -->


</div>
<header class="pd-header">


</div>
    <a href="#" class="pd-brand">


</article>
        <span class="pd-logo">
            +
        </span>


        <span class="pd-brand-text">


<article class="ws-product-card">
            <strong>
                گروه اهدای مثبت بخشنده
            </strong>


<div class="ws-product-image">
            <small>
                با مدیریت آقای بخشنده
            </small>


<img
        </span>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-52.png"
alt="دستگاه NVR دوربین مداربسته"
loading="lazy">


</div>
    </a>


<div class="ws-product-info">


<div class="ws-brand">
    <nav class="pd-menu">
ARS
</div>


<h3 class="ws-product-title">
        <a href="#donation">
دستگاه NVR ضبط تصاویر دوربین تحت شبکه
            خدمات اهدا
</h3>
        </a>


<div class="ws-price">
        <a href="#choice">
            مسیر خدمات
        </a>


<span class="ws-new-price">
        <a href="#about">
استعلام قیمت
            درباره ما
</span>
        </a>


<span class="ws-discount">
        <a href="#articles">
ویژه
            مجله
</span>
        </a>


</div>
        <a href="#faq">
            سوالات متداول
        </a>


<div class="ws-product-actions">
    </nav>


<button class="ws-cart">
دریافت مشاوره
</button>


<button class="ws-favorite">
    <a href="#contact"
<i class="fa-regular fa-heart"></i>
      class="pd-header-btn">
</button>
        درخواست مشاوره
    </a>


</div>
</header>


</div>


</article>
<!-- =======================================================
    HERO
======================================================= -->


<section class="pd-hero">


<article class="ws-product-card">
    <div class="pd-hero-content">


<div class="ws-product-image">
        <span class="pd-hero-badge">
            همراه شما در مسیر تشکیل خانواده
        </span>


<img
        <h1>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-53.jpg"
            گروه
alt="دزدگیر اماکن ARS"
            <strong>
loading="lazy">
                اهدای مثبت بخشنده
            </strong>
        </h1>


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


<div class="ws-product-info">
        <div class="pd-buttons">


<div class="ws-brand">
            <a href="#donation"
ARS
              class="pd-btn pd-btn-main">
</div>
                مشاهده خدمات اهدا
            </a>


<h3 class="ws-product-title">
            <a href="#contact"
دزدگیر اماکن و سیستم اعلام سرقت
              class="pd-btn pd-btn-light">
</h3>
                دریافت مشاوره
            </a>


<div class="ws-price">
        </div>


<span class="ws-new-price">
    </div>
استعلام قیمت
</span>


<span class="ws-discount">
</section>
ویژه
</span>


</div>


<div class="ws-product-actions">
<!-- =======================================================
    QUICK SERVICES
======================================================= -->


<button class="ws-cart">
<section class="pd-section">
دریافت مشاوره
</button>


<button class="ws-favorite">
    <div class="pd-container">
<i class="fa-regular fa-heart"></i>
</button>


</div>
        <div class="pd-quick">


</div>
            <a href="#egg"
              class="pd-quick-card">


</article>
                <span class="pd-quick-icon">
                    ♡
                </span>


                <strong>
                    اهدای تخمک
                </strong>


<article class="ws-product-card">
                <small>
                    شرایط و مراحل
                </small>


<div class="ws-product-image">
            </a>


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-54.png"
alt="هارد مخصوص دوربین مداربسته"
loading="lazy">


</div>
            <a href="#embryo"
              class="pd-quick-card">
 
                <span class="pd-quick-icon">
                    ✦
                </span>
 
                <strong>
                    اهدای جنین
                </strong>


<div class="ws-product-info">
                <small>
                    راهنمای دریافت
                </small>


<div class="ws-brand">
            </a>
ARS
</div>


<h3 class="ws-product-title">
هارد مخصوص ضبط تصاویر دوربین مداربسته
</h3>


<div class="ws-price">
            <a href="#surrogacy"
              class="pd-quick-card">


<span class="ws-new-price">
                <span class="pd-quick-icon">
استعلام قیمت
                    ♧
</span>
                </span>


<span class="ws-discount">
                <strong>
ویژه
                    رحم جایگزین
</span>
                </strong>


</div>
                <small>
                    آشنایی با مسیر
                </small>


<div class="ws-product-actions">
            </a>


<button class="ws-cart">
دریافت مشاوره
</button>


<button class="ws-favorite">
            <a href="#contact"
<i class="fa-regular fa-heart"></i>
              class="pd-quick-card">
</button>


</div>
                <span class="pd-quick-icon">
                    ☎
                </span>


</div>
                <strong>
                    مشاوره
                </strong>


</article>
                <small>
                    شروع گفت‌وگو
                </small>


</div>
            </a>


</div>
        </div>


</div>
    </div>


</section>
</section>




<!-- ======================================================
<!-- =======================================================
     BENEFITS
     START
====================================================== -->
======================================================= -->


<section class="ws-section">
<section class="pd-section">


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


<h2 class="ws-section-title">
        <div class="pd-start">
چرا سیستم امنیتی ARS؟
</h2>


</div>
            <h2>
                از کدام مسیر می‌خواهید شروع کنید؟
            </h2>


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


<div class="ws-benefits">
            <div class="pd-start-options">


<div class="ws-benefit">
                <a href="#choice"
                  class="pd-start-option">
                    من گیرنده هستم
                </a>


<div class="ws-benefit-icon">
                <a href="#choice"
<i class="fa-solid fa-camera"></i>
                  class="pd-start-option">
</div>
                    من اهداکننده هستم
                </a>


<strong>
                <a href="#articles"
تجهیزات باکیفیت
                  class="pd-start-option">
</strong>
                    می‌خواهم بیشتر بدانم
                </a>


<span>
                <a href="#contact"
انتخاب تجهیزات مناسب برای هر پروژه
                  class="pd-start-option">
</span>
                    مشاوره می‌خواهم
                </a>


</div>
            </div>


        </div>


<div class="ws-benefit">
    </div>


<div class="ws-benefit-icon">
</section>
<i class="fa-solid fa-headset"></i>
</div>


<strong>
مشاوره تخصصی
</strong>


<span>
<!-- =======================================================
راهنمایی برای انتخاب دوربین مناسب
    DONATION SERVICES
</span>
======================================================= -->


</div>
<section class="pd-section"
        id="donation">


    <div class="pd-container">


<div class="ws-benefit">
        <div class="pd-donation">


<div class="ws-benefit-icon">
            <div class="pd-title">
<i class="fa-solid fa-shield-halved"></i>
</div>


<strong>
                <span>
امنیت مطمئن
                    خدمات اهدای مثبت
</strong>
                </span>


<span>
                <h2>
راهکارهای نظارتی متناسب با نیاز شما
                    خدمات اهدا
</span>
                </h2>


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


            </div>


<div class="ws-benefit">


<div class="ws-benefit-icon">
            <div class="pd-donation-grid">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>


<strong>
نصب و راه‌اندازی
</strong>


<span>
                <article class="pd-donation-card"
اجرای اصولی سیستم‌های نظارتی
                        id="egg">
</span>


</div>
                    <div class="pd-donation-image">


</div>
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-15.jpg"
                            alt="اهدای تخمک"
                            loading="lazy"
                        >


</section>
                    </div>


                    <div class="pd-donation-content">


<!-- ======================================================
                        <div class="pd-donation-icon">
    SECURITY CATEGORIES
                            ♡
====================================================== -->
                        </div>


<section class="ws-section">
                        <h3>
                            اهدای تخمک
                        </h3>


<div class="ws-section-head">
                        <p>
                            آشنایی با شرایط اهدای تخمک،
                            مراحل دریافت و نکات مهم پیش از تصمیم‌گیری.
                        </p>


<h2 class="ws-section-title">
                        <div class="pd-donation-actions">
دسته‌بندی تجهیزات امنیتی
</h2>


<a href="#" class="ws-more">
                            <a href="#">
مشاهده همه دسته‌بندی‌ها
                                من گیرنده هستم
</a>
                            </a>


</div>
                            <a href="#">
                                من اهداکننده هستم
                            </a>


                        </div>


<div class="ws-category-grid">
                    </div>


                </article>


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


<div class="ws-category-box-icon">
                <article class="pd-donation-card"
<i class="fa-solid fa-camera"></i>
                        id="embryo">
</div>


<div>
                    <div class="pd-donation-image">


<strong>
                        <img
دوربین مداربسته
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-36.png"
</strong>
                            alt="اهدای جنین"
                            loading="lazy"
                        >


<span>
                    </div>
انواع دوربین برای فضای داخلی و خارجی
</span>


</div>
                    <div class="pd-donation-content">


</a>
                        <div class="pd-donation-icon">
                            ✦
                        </div>


                        <h3>
                            اهدای جنین
                        </h3>


<a href="#" class="ws-category-box">
                        <p>
                            آشنایی با مفهوم اهدای جنین،
                            شرایط دریافت و مراحل این مسیر.
                        </p>


<div class="ws-category-box-icon">
                        <div class="pd-donation-actions">
<i class="fa-solid fa-video"></i>
</div>


<div>
                            <a href="#">
                                شرایط دریافت
                            </a>


<strong>
                            <a href="#">
دوربین تحت شبکه
                                مشاوره
</strong>
                            </a>


<span>
                        </div>
دوربین IP و تجهیزات نظارت تصویری
</span>


</div>
                    </div>


</a>
                </article>




<a href="#" class="ws-category-box">
                <article class="pd-donation-card"
                        id="surrogacy">


<div class="ws-category-box-icon">
                    <div class="pd-donation-image">
<i class="fa-solid fa-hard-drive"></i>
</div>


<div>
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-63.png"
                            alt="رحم جایگزین"
                            loading="lazy"
                        >


<strong>
                    </div>
DVR و NVR
</strong>


<span>
                    <div class="pd-donation-content">
دستگاه‌های ضبط و مدیریت تصاویر
</span>


</div>
                        <div class="pd-donation-icon">
                            ♧
                        </div>


</a>
                        <h3>
                            رحم جایگزین
                        </h3>


                        <p>
                            آشنایی با مفهوم رحم جایگزین،
                            شرایط و مراحل این مسیر.
                        </p>


<a href="#" class="ws-category-box">
                        <div class="pd-donation-actions">


<div class="ws-category-box-icon">
                            <a href="#">
<i class="fa-solid fa-bell"></i>
                                آشنایی بیشتر
</div>
                            </a>


<div>
                            <a href="#">
                                مشاوره
                            </a>


<strong>
                        </div>
دزدگیر اماکن
</strong>


<span>
                    </div>
سیستم اعلام سرقت و حفاظت از اماکن
</span>


</div>
                </article>


</a>
            </div>


        </div>


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


<div class="ws-category-box-icon">
</section>
<i class="fa-solid fa-mobile-screen-button"></i>
</div>


<div>


<strong>
<!-- =======================================================
انتقال تصویر
    RECEIVER / DONOR
</strong>
======================================================= -->


<span>
<section class="pd-section"
مشاهده تصاویر دوربین از راه دور
        id="choice">
</span>


</div>
    <div class="pd-container">


</a>
        <div class="pd-title">


</div>
            <span>
                انتخاب مسیر
            </span>


</section>
            <h2>
                شما در کدام گروه قرار می‌گیرید؟
            </h2>


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


<!-- ======================================================
        </div>
    BRANDS
====================================================== -->


<section class="ws-section">


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


<h2 class="ws-section-title">
            <div class="pd-choice-card">
برندهای تجهیزات امنیتی
</h2>


</div>
                <h3>
                    من گیرنده هستم
                </h3>


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


<div class="ws-brands">
                <a href="#">
                    مشاهده راهنمای گیرندگان
                </a>


<a href="#" class="ws-brand-card">
            </div>


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-62.png"
alt="برند ARS دوربین مداربسته"
loading="lazy">


</a>
            <div class="pd-choice-card">


                <h3>
                    من اهداکننده هستم
                </h3>


<a href="#" class="ws-brand-card">
                <p>
                    برای آشنایی با شرایط و مراحل
                    اهدای تخمک، جنین یا سایر خدمات.
                </p>


<img
                <a href="#">
src="https://dl.faraghaib.ir/m/260018-01/260018-01-64.png"
                    مشاهده راهنمای اهداکنندگان
alt="برند دوربین مداربسته"
                </a>
loading="lazy">


</a>
            </div>


        </div>


<a href="#" class="ws-brand-card">
    </div>


<img
</section>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-62.png"
alt="برند تجهیزات نظارتی"
loading="lazy">


</a>


<!-- =======================================================
    همراهی و آگاهی
    MOBILE VERTICAL
======================================================= -->


<a href="#" class="ws-brand-card">
<section class="pd-section">


<img
    <div class="pd-container">
src="https://dl.faraghaib.ir/m/260018-01/260018-01-70.png"
alt="برند تجهیزات امنیتی"
loading="lazy">


</a>
        <div class="pd-title">


            <span>
                همراهی و آگاهی
            </span>


<a href="#" class="ws-brand-card">
            <h2>
                مسیر آگاهانه، تصمیم مطمئن‌تر
            </h2>


<img
            <p>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-65.png"
                اطلاعات درست و همراهی مناسب می‌تواند
alt="برند دوربین تحت شبکه"
                مسیر تصمیم‌گیری را روشن‌تر کند.
loading="lazy">
            </p>


</a>
        </div>




<a href="#" class="ws-brand-card">
        <div class="pd-image-slider">


<img
            <a href="#" class="pd-image-slide">
src="https://dl.faraghaib.ir/m/260018-01/260018-01-66.png"
alt="برند سیستم حفاظتی"
loading="lazy">


</a>
                <img
                    src="IMAGE-SLIDE-1"
                    alt="مشاوره اهدای تخمک"
                    loading="lazy"
                >


</div>
                <span>
                    مشاوره اهدای تخمک
                </span>


</section>
            </a>




<!-- ======================================================
            <a href="#" class="pd-image-slide">
    BEST SELLERS
====================================================== -->


<section class="ws-section">
                <img
                    src="IMAGE-SLIDE-2"
                    alt="اهدای جنین"
                    loading="lazy"
                >


<div class="ws-section-head">
                <span>
                    آشنایی با اهدای جنین
                </span>


<h2 class="ws-section-title">
            </a>
پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
</h2>


<a href="#" class="ws-more">
مشاهده همه
</a>


</div>
            <a href="#" class="pd-image-slide">


                <img
                    src="IMAGE-SLIDE-3"
                    alt="رحم جایگزین"
                    loading="lazy"
                >


<div class="ws-product-slider"
                <span>
data-product-slider>
                    رحم جایگزین
                </span>


<div class="ws-product-track">
            </a>




<!-- ROW 1 -->
            <a href="#" class="pd-image-slide">


<div class="ws-product-row">
                <img
                    src="IMAGE-SLIDE-4"
                    alt="گروه اهدای مثبت بخشنده"
                    loading="lazy"
                >


                <span>
                    همراهی گروه اهدای مثبت
                </span>


<article class="ws-product-card">
            </a>


<div class="ws-product-image">
        </div>


<img
    </div>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-25.jpg"
alt="دوربین مداربسته پرفروش ARS"
loading="lazy">


</div>
</section>


<div class="ws-product-info">


<h3 class="ws-product-title">
<!-- =======================================================
دوربین مداربسته پرفروش ARS
    BENEFITS
</h3>
======================================================= -->


<div class="ws-price">
<section class="pd-section"
        id="about">


<span class="ws-new-price">
    <div class="pd-container">
استعلام قیمت
</span>


</div>
        <div class="pd-title">


</div>
            <span>
                چرا اهدای مثبت؟
            </span>


</article>
            <h2>
                همراهی با احترام و حفظ حریم خصوصی
            </h2>


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


<article class="ws-product-card">
        </div>


<div class="ws-product-image">


<img
        <div class="pd-benefits">
src="https://dl.faraghaib.ir/m/260018-01/260018-01-55.jpg"
alt="دوربین IP پرفروش"
loading="lazy">


</div>
            <div class="pd-benefit">


<div class="ws-product-info">
                <div class="pd-benefit-icon">
                    ✓
                </div>


<h3 class="ws-product-title">
                <strong>
دوربین تحت شبکه IP
                    مشاوره
</h3>
                </strong>


<div class="ws-price">
                <small>
                    راهنمایی پیش از تصمیم
                </small>


<span class="ws-new-price">
            </div>
استعلام قیمت
</span>


</div>


</div>
            <div class="pd-benefit">


</article>
                <div class="pd-benefit-icon">
                    🔒
                </div>


                <strong>
                    محرمانگی
                </strong>


<article class="ws-product-card">
                <small>
                    احترام به حریم خصوصی
                </small>


<div class="ws-product-image">
            </div>


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-51.jpg"
alt="دستگاه DVR پرفروش"
loading="lazy">


</div>
            <div class="pd-benefit">


<div class="ws-product-info">
                <div class="pd-benefit-icon">
                    ♡
                </div>


<h3 class="ws-product-title">
                <strong>
دستگاه DVR ضبط تصاویر
                    همراهی
</h3>
                </strong>


<div class="ws-price">
                <small>
                    در طول مسیر
                </small>


<span class="ws-new-price">
            </div>
استعلام قیمت
</span>


</div>


</div>
            <div class="pd-benefit">


</article>
                <div class="pd-benefit-icon">
                    ✦
                </div>


                <strong>
                    آگاهی
                </strong>


<article class="ws-product-card">
                <small>
                    اطلاعات قابل فهم
                </small>


<div class="ws-product-image">
            </div>


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-57.jpg"
alt="دوربین مداربسته دید در شب"
loading="lazy">


</div>
            <div class="pd-benefit">


<div class="ws-product-info">
                <div class="pd-benefit-icon">
                    ☎
                </div>


<h3 class="ws-product-title">
                <strong>
دوربین مداربسته دید در شب
                    پاسخگویی
</h3>
                </strong>


<div class="ws-price">
                <small>
                    ارتباط و راهنمایی
                </small>


<span class="ws-new-price">
            </div>
استعلام قیمت
</span>


</div>


</div>
            <div class="pd-benefit">


</article>
                <div class="pd-benefit-icon">
                    +
                </div>


</div>
                <strong>
                    مسیر روشن
                </strong>


                <small>
                    مرحله به مرحله
                </small>


<!-- ROW 2 -->
            </div>


<div class="ws-product-row">
        </div>


    </div>


<article class="ws-product-card">
</section>


<div class="ws-product-image">


<img
<!-- =======================================================
src="https://dl.faraghaib.ir/m/260018-01/260018-01-58.jpg"
    STEPS
alt="دستگاه NVR پرفروش"
======================================================= -->
loading="lazy">


</div>
<section class="pd-section">


<div class="ws-product-info">
    <div class="pd-container">


<h3 class="ws-product-title">
        <div class="pd-title">
دستگاه NVR حرفه‌ای
</h3>


<div class="ws-price">
            <span>
                چگونه شروع کنیم؟
            </span>


<span class="ws-new-price">
            <h2>
استعلام قیمت
                مسیر دریافت خدمات
</span>
            </h2>


</div>
        </div>


</div>


</article>
        <div class="pd-steps">


            <div class="pd-step">


<article class="ws-product-card">
                <div class="pd-step-number">
                    ۱
                </div>


<div class="ws-product-image">
                <div>


<img
                    <strong>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-54.png"
                        مشاوره اولیه
alt="هارد مخصوص دوربین مداربسته"
                    </strong>
loading="lazy">


</div>
                    <small>
                        بررسی نیاز و شرایط
                    </small>


<div class="ws-product-info">
                </div>


<h3 class="ws-product-title">
            </div>
هارد مخصوص سیستم مداربسته
</h3>


<div class="ws-price">


<span class="ws-new-price">
            <div class="pd-step">
استعلام قیمت
</span>


</div>
                <div class="pd-step-number">
                    ۲
                </div>


</div>
                <div>


</article>
                    <strong>
                        بررسی شرایط
                    </strong>


                    <small>
                        شناخت مسیر مناسب
                    </small>


<article class="ws-product-card">
                </div>


<div class="ws-product-image">
            </div>


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-59.jpg"
alt="دزدگیر اماکن پرفروش"
loading="lazy">


</div>
            <div class="pd-step">


<div class="ws-product-info">
                <div class="pd-step-number">
                    ۳
                </div>


<h3 class="ws-product-title">
                <div>
دزدگیر اماکن هوشمند
</h3>


<div class="ws-price">
                    <strong>
                        انتخاب مسیر
                    </strong>


<span class="ws-new-price">
                    <small>
استعلام قیمت
                        تصمیم‌گیری آگاهانه
</span>
                    </small>


</div>
                </div>


</div>
            </div>


</article>


            <div class="pd-step">


<article class="ws-product-card">
                <div class="pd-step-number">
                    ۴
                </div>


<div class="ws-product-image">
                <div>


<img
                    <strong>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-60.jpg"
                        ادامه مسیر
alt="تجهیزات انتقال تصویر"
                    </strong>
loading="lazy">


</div>
                    <small>
                        همراهی و راهنمایی
                    </small>


<div class="ws-product-info">
                </div>


<h3 class="ws-product-title">
            </div>
تجهیزات انتقال تصویر دوربین
</h3>


<div class="ws-price">
        </div>


<span class="ws-new-price">
    </div>
استعلام قیمت
</span>


</div>
</section>


</div>


</article>
<!-- =======================================================
    مجله اهدای مثبت
    MOBILE VERTICAL
======================================================= -->


</div>
<section class="pd-section"
        id="articles">


</div>
    <div class="pd-container">


</div>
        <div class="pd-title">


</section>
            <span>
                مجله اهدای مثبت
            </span>


            <h2>
                دانستنی‌های باروری و اهدا
            </h2>


<!-- ======================================================
            <p>
    ARTICLES
                محتوای آموزشی کوتاه و کاربردی برای تصمیم‌گیری آگاهانه.
====================================================== -->
            </p>


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


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


<h2 class="ws-section-title">
        <div class="pd-articles">
مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی
</h2>


<a href="#" class="ws-more">
مشاهده مقالات
</a>


</div>
            <article class="pd-article">


                <div class="pd-article-image">


<div class="ws-articles">
                    <img
                        src="IMAGE-ARTICLE-1"
                        alt="سن مناسب برای اهدای تخمک"
                        loading="lazy"
                    >


                </div>


<article class="ws-article">
                <div class="pd-article-body">


<div class="ws-article-image">
                    <small>
                        اهدای تخمک
                    </small>


<img
                    <h3>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-68.png"
                        سن مناسب برای اهدای تخمک
alt="راهنمای خرید دوربین مداربسته"
                    </h3>
loading="lazy">


</div>
                    <p>
                        آشنایی با شرایط سنی و نکات مهم پیش از اهدا.
                    </p>


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


<h3>
            </article>
راهنمای خرید دوربین مداربسته برای منزل و محل کار
</h3>


<p>
با مهم‌ترین نکات انتخاب دوربین مداربسته،
کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
</p>


<a href="#" class="ws-read">
            <article class="pd-article">
مطالعه مقاله ←
</a>


</div>
                <div class="pd-article-image">


</article>
                    <img
                        src="IMAGE-ARTICLE-2"
                        alt="اهدای جنین چیست"
                        loading="lazy"
                    >


                </div>


<article class="ws-article">
                <div class="pd-article-body">


<div class="ws-article-image">
                    <small>
                        اهدای جنین
                    </small>


<img
                    <h3>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-67.png"
                        اهدای جنین چیست؟
alt="تفاوت دوربین مداربسته آنالوگ و تحت شبکه"
                    </h3>
loading="lazy">


</div>
                    <p>
                        آشنایی با مفهوم اهدای جنین و مسیر دریافت.
                    </p>


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


<h3>
            </article>
تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟
</h3>


<p>
مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
کاربردها و نکات انتخاب هر سیستم.
</p>


<a href="#" class="ws-read">
            <article class="pd-article">
مطالعه مقاله ←
</a>


</div>
                <div class="pd-article-image">


</article>
                    <img
                        src="IMAGE-ARTICLE-3"
                        alt="رحم جایگزین چیست"
                        loading="lazy"
                    >


                </div>


<article class="ws-article">
                <div class="pd-article-body">


<div class="ws-article-image">
                    <small>
                        رحم جایگزین
                    </small>


<img
                    <h3>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-69.png"
                        رحم جایگزین چیست؟
alt="بهترین مکان نصب دوربین مداربسته"
                    </h3>
loading="lazy">


</div>
                    <p>
                        آشنایی اولیه با مفهوم و مراحل رحم جایگزین.
                    </p>


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


<h3>
            </article>
بهترین مکان برای نصب دوربین مداربسته کجاست؟
</h3>


<p>
        </div>
نکات مهم انتخاب محل نصب دوربین برای افزایش
امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
</p>


<a href="#" class="ws-read">
    </div>
مطالعه مقاله ←
</a>


</div>
</section>


</article>


</div>
<!-- =======================================================
    FAQ
======================================================= -->


</section>
<section class="pd-section"
        id="faq">


    <div class="pd-container">


<!-- ======================================================
        <div class="pd-title">
    CTA
====================================================== -->


<section class="ws-cta">
            <span>
                سوالات متداول
            </span>


<h2>
            <h2>
برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
                پاسخ به سوالات شما
</h2>
            </h2>


<p>
        </div>
کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
را پیشنهاد دهند.
</p>


<a href="#" class="ws-cta-btn">


<i class="fa-solid fa-phone"></i>
        <div class="pd-faq">


دریافت مشاوره تخصصی
            <details>


</a>
                <summary>
                    اهدای تخمک چیست؟
                </summary>


</section>
                <p>
                    اهدای تخمک فرایندی است که در آن تخمک
                    فرد اهداکننده برای استفاده در درمان ناباروری
                    در اختیار گیرنده قرار می‌گیرد.
                </p>


            </details>


</div>


            <details>


<script>
                <summary>
                    شرایط اهدای تخمک چیست؟
                </summary>


document.addEventListener(
                <p>
"DOMContentLoaded",
                    شرایط اهدا باید بر اساس معیارهای پزشکی،
function(){
                    قانونی و ارزیابی‌های تخصصی بررسی شود.
                </p>


            </details>


/* =========================================================
  HERO SLIDER
  چرخش هر 3 ثانیه
========================================================= */


const hero =
            <details>
document.querySelector(
"[data-hero-slider]"
);


                <summary>
                    اهدای جنین چگونه انجام می‌شود؟
                </summary>


if(hero){
                <p>
                    شرایط و مراحل دریافت یا اهدای جنین
                    نیازمند بررسی تخصصی و طی مراحل قانونی مربوط است.
                </p>


    const track =
            </details>
    hero.querySelector(
        ".ws-hero-track"
    );


    const slides =
    hero.querySelectorAll(
        ".ws-hero-slide"
    );


    const dotsBox =
            <details>
    hero.querySelector(
        ".ws-hero-dots"
    );


    let current=0;
                <summary>
                    رحم جایگزین چیست؟
                </summary>


    let timer=null;
                <p>
                    رحم جایگزین روشی است که در آن بارداری
                    توسط فرد دیگری برای متقاضیان انجام می‌شود
                    و جزئیات آن باید به صورت تخصصی بررسی شود.
                </p>


            </details>


    /* -----------------------------------------
      تنظیم ارتفاع واقعی هر اسلاید
      بدون Crop
    ----------------------------------------- */


    function setHeroHeight(){
            <details>


        const activeSlide =
                <summary>
        slides[current];
                    چگونه برای مشاوره اقدام کنم؟
                </summary>


        if(!activeSlide) return;
                <p>
                    می‌توانید از طریق اطلاعات تماس مجموعه
                    برای دریافت راهنمایی اولیه اقدام کنید.
                </p>


        const image =
            </details>
        activeSlide.querySelector("img");


         if(!image) return;
         </div>


    </div>


        function applyHeight(){
</section>


            const containerWidth =
            hero.clientWidth;


            const naturalWidth =
<!-- =======================================================
            image.naturalWidth;
    CTA
======================================================= -->


            const naturalHeight =
<section class="pd-section"
            image.naturalHeight;
        id="contact">


    <div class="pd-container">


            if(
        <div class="pd-cta">
                naturalWidth &&
                naturalHeight &&
                containerWidth
            ){


                 const ratio =
            <h2>
                naturalHeight /
                 برای شروع مسیر خود تنها نیستید
                naturalWidth;
            </h2>


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


                let height =
            <a href="#">
                 containerWidth *
                 درخواست مشاوره
                ratio;
            </a>


        </div>


                /*
    </div>
                  محدودیت منطقی برای تصاویر خیلی بلند
                  فقط در موبایل
                */


                if(
</section>
                    window.innerWidth < 600 &&
                    height > window.innerHeight * .65
                ){


                    height =
                    window.innerHeight * .65;


                }
<!-- =======================================================
    FOOTER
======================================================= -->


<footer class="pd-footer">


                activeSlide.style.height =
    <div class="pd-footer-grid">
                height + "px";


            }
        <div>


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


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


         if(image.complete){
         </div>


            applyHeight();


         }else{
         <div>


             image.addEventListener(
             <h3>
                 "load",
                 خدمات
                applyHeight,
             </h3>
                {once:true}
             );


        }
            <ul>


    }
                <li>
                    <a href="#egg">
                        اهدای تخمک
                    </a>
                </li>


                <li>
                    <a href="#embryo">
                        اهدای جنین
                    </a>
                </li>


    /* -----------------------------------------
                <li>
      ساخت Dot
                    <a href="#surrogacy">
    ----------------------------------------- */
                        رحم جایگزین
                    </a>
                </li>


    slides.forEach(
                <li>
        function(slide,index){
                    <a href="#contact">
                        مشاوره
                    </a>
                </li>


             const dot =
             </ul>
            document.createElement(
                "button"
            );


            dot.type="button";
        </div>


            dot.className=
                "ws-hero-dot";


            if(index===0){
        <div>


                 dot.classList.add(
            <h3>
                    "active"
                 ارتباط با ما
                );
            </h3>


             }
             <ul>


            dot.setAttribute(
                 <li>
                 "aria-label",
                    تلفن: شماره تماس مجموعه
                "نمایش اسلاید "+
                 </li>
                 (index+1)
            );


                <li>
                    ایمیل: ایمیل مجموعه
                </li>


            dot.addEventListener(
                <li>
                "click",
                    آدرس: آدرس مجموعه
                 function(){
                 </li>


                    goToSlide(index);
            </ul>


                    restart();
        </div>


                }
    </div>
            );




            dotsBox.appendChild(dot);
    <div class="pd-footer-bottom">


         }
         © تمامی حقوق برای گروه اهدای مثبت بخشنده محفوظ است.
    );


    </div>


    const dots =
</footer>
    dotsBox.querySelectorAll(
        ".ws-hero-dot"
    );




    /* -----------------------------------------
<!-- =======================================================
      تغییر اسلاید
    MOBILE BOTTOM NAV
    ----------------------------------------- */
======================================================= -->


    function goToSlide(index){
<nav class="pd-mobile-nav"
    aria-label="منوی اصلی موبایل">


        current=index;
    <a href="#donation"
      class="active">


        <span>
            ♡
        </span>


         track.style.transform =
         خدمات اهدا
            "translateX(-"+
            (current*100)+
            "%)";


    </a>


        dots.forEach(
            function(dot,i){


                dot.classList.toggle(
    <a href="#choice">
                    "active",
                    i===current
                );


             }
        <span>
         );
            
         </span>


        مسیر خدمات


        /*
    </a>
          بعد از تغییر اسلاید
          ارتفاع واقعی عکس جدید
          محاسبه می‌شود.
        */


        setHeroHeight();


     }
     <a href="#about">


        <span>
            ✦
        </span>


    function next(){
        درباره ما


        current =
    </a>
        (current+1) %
        slides.length;


        goToSlide(current);


     }
     <a href="#articles">


        <span>
            ▣
        </span>


    function start(){
        مجله


        timer =
    </a>
        setInterval(
            next,
            3000
        );


    }


    <a href="#contact">


    function stop(){
        <span>
            ☎
        </span>


         if(timer){
         تماس


            clearInterval(timer);
    </a>


            timer=null;
</nav>


        }


    }
</div>
 
 
    function restart(){
 
        stop();
 
        start();
 
    }
 
 
    hero.addEventListener(
        "mouseenter",
        stop
    );
 
 
    hero.addEventListener(
        "mouseleave",
        start
    );
 
 
    /*
      وقتی اندازه صفحه تغییر کرد،
      ارتفاع بنر دوباره محاسبه می‌شود.
    */
 
    window.addEventListener(
        "resize",
        setHeroHeight
    );
 
 
    /*
      اولین بار
    */
 
    setHeroHeight();
 
    start();
 
}
 
 
/* =========================================================
  PRODUCT SLIDERS
  بدون کارت نصفه
========================================================= */
 
document.querySelectorAll(
    "[data-product-slider]"
).forEach(
    function(slider){
 
        const track =
        slider.querySelector(
            ".ws-product-track"
        );
 
        if(!track) return;
 
 
        let position=0;
 
        let autoTimer=null;
 
 
        /* -----------------------------------------
          حداکثر میزان حرکت
        ----------------------------------------- */
 
        function getMaxScroll(){
 
            return Math.max(
                0,
                track.scrollWidth -
                slider.clientWidth
            );
 
        }
 
 
        /* -----------------------------------------
          اندازه حرکت
        ----------------------------------------- */
 
        function getStep(){
 
            const card =
            track.querySelector(
                ".ws-product-card"
            );
 
            if(!card) return 0;
 
 
            const style =
            window.getComputedStyle(
                card.parentElement
            );
 
            const gap =
            parseFloat(
                style.columnGap ||
                style.gap ||
                10
            );
 
 
            return (
                card.getBoundingClientRect().width
                + gap
            );
 
        }
 
 
        /* -----------------------------------------
          حرکت
        ----------------------------------------- */
 
        function moveNext(){
 
            const maxScroll =
            getMaxScroll();
 
 
            if(maxScroll<=0){
 
                position=0;
 
                track.style.transform=
                    "translateX(0)";
 
                return;
 
            }
 
 
            const step =
            getStep();
 
 
            position += step;
 
 
            /*
              اگر به انتها رسید:
              دوباره از ابتدا
            */
 
            if(position>=maxScroll){
 
                position=0;
 
            }
 
 
            track.style.transform =
                "translateX(-"+
                position+
                "px)";
 
        }
 
 
        /* -----------------------------------------
          شروع
        ----------------------------------------- */
 
        function start(){
 
            stop();
 
 
            autoTimer =
            setInterval(
                moveNext,
                3500
            );
 
        }
 
 
        /* -----------------------------------------
          توقف
        ----------------------------------------- */
 
        function stop(){
 
            if(autoTimer){
 
                clearInterval(
                    autoTimer
                );
 
                autoTimer=null;
 
            }
 
        }
 
 
        slider.addEventListener(
            "mouseenter",
            stop
        );
 
 
        slider.addEventListener(
            "mouseleave",
            start
        );
 
 
        /*
          با تغییر اندازه صفحه،
          موقعیت نامعتبر حذف می‌شود.
        */
 
        window.addEventListener(
            "resize",
            function(){
 
                const maxScroll =
                getMaxScroll();
 
 
                if(position>maxScroll){
 
                    position=0;
 
                }
 
 
                track.style.transform =
                    "translateX(-"+
                    position+
                    "px)";
 
            }
        );
 
 
        start();
 
    }
);
 
});
 
</script>


</html>
</html>

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

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

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

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

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

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

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

خدمات اهدا

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

انتخاب مسیر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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