پرش به محتوا

تست۶ - فراغیب

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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;


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


</section>
    border-radius:11px;


    font-size:1rem;
}


<!-- ======================================================
.pd-mobile-nav a.active{
    HERO
    فقط آدرس src تصاویر را عوض کنید
====================================================== -->


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


<div class="ws-hero"
.pd-mobile-nav a.active span{
data-hero-slider>


<div class="ws-hero-track">
    background:var(--pink);


    color:#fff;


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


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


</a>
/* =========================================================
  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="lazy">


</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/260018-01-02.png"
alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
loading="lazy">


</a>
        margin-right:auto;
    }


    .pd-menu a{


</div>
        padding:8px 10px;


<div class="ws-hero-dots"></div>
        border-radius:12px;


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


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


        font-weight:900;
    }


<!-- ======================================================
    .pd-header-btn{
    SPECIAL PRODUCTS
    2 ROW
====================================================== -->


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


<div class="ws-section-head">
        padding:8px 14px;


<h2 class="ws-section-title">
        border-radius:13px;
محصولات ویژه دوربین مداربسته ARS
</h2>


<a href="#" class="ws-more">
        background:var(--purple);
مشاهده همه محصولات
</a>


</div>
        color:#fff;


        font-size:.7rem;


<div class="ws-product-slider"
        font-weight:900;
data-product-slider>
    }


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


    .pd-hero-content{
        min-height:400px;
        padding:45px;
    }


<!-- ROW 1 -->
    .pd-hero h1{
        font-size:2.25rem;
    }


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


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


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


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


<img
    .pd-donation-card{
src="https://dl.faraghaib.ir/m/260018-01/260018-01-29.jpg"
        min-height:320px;
alt="دوربین مداربسته بولت ARS"
    }
loading="lazy">


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


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


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


<h3 class="ws-product-title">
    .pd-image-slider{
دوربین مداربسته بولت با دید در شب
</h3>


<div class="ws-price">
        grid-template-columns:
            repeat(4,1fr);


<span class="ws-new-price">
        gap:12px;
استعلام قیمت
    }
</span>


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


</div>
        height:205px;
    }


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


<button class="ws-cart">
        grid-template-columns:
دریافت مشاوره
            repeat(3,1fr);
</button>
    }


<button
    .pd-steps{
class="ws-favorite"
aria-label="افزودن به علاقه‌مندی">


<i class="fa-regular fa-heart"></i>
        grid-template-columns:
            repeat(4,1fr);
    }


</button>
    .pd-step{


</div>
        display:block;


</div>
        text-align:center;
    }


</article>
    .pd-step-number{


        margin:0 auto 8px;
    }


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


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


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


</div>
        grid-template-columns:
            1.5fr 1fr 1fr;
    }


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


<div class="ws-brand">
    .pd-mobile-nav{
ARS
        display:none;
</div>
    }


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


<div class="ws-price">


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


<span class="ws-discount">
@media (min-width:1050px){
ویژه
</span>


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


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


<button class="ws-cart">
    .pd-title h2{
دریافت مشاوره
        font-size:1.7rem;
</button>
    }


<button class="ws-favorite">
    .pd-title p{
<i class="fa-regular fa-heart"></i>
        font-size:.9rem;
</button>
    }


</div>
    .pd-hero{


</div>
        min-height:470px;


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


    .pd-hero-content{


<article class="ws-product-card">
        min-height:470px;


<div class="ws-product-image">
        padding:60px;
    }


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


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


<div class="ws-product-info">
    .pd-hero p{


<div class="ws-brand">
        font-size:1rem;
ARS
    }
</div>


<h3 class="ws-product-title">
    .pd-donation{
دوربین مداربسته تحت شبکه IP با کیفیت بالا
</h3>


<div class="ws-price">
        padding:37px 20px 30px;


<span class="ws-new-price">
        border-radius:40px;
استعلام قیمت
    }
</span>


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


</div>
        width:520px;
        height:470px;


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


<button class="ws-cart">
    .pd-donation::after{
دریافت مشاوره
</button>


<button class="ws-favorite">
        width:430px;
<i class="fa-regular fa-heart"></i>
        height:350px;
</button>


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


</div>
    .pd-donation-card{


</article>
        min-height:390px;


        border-radius:33px;
    }


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


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


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


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


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


<div class="ws-brand">
        height:230px;
ARS
</div>


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


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


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


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


</div>
        height:185px;
    }


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


<button class="ws-cart">
        font-size:.95rem;
دریافت مشاوره
    }
</button>
}


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


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


</div>
@media (hover:hover){


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


</div>
        transition:
            transform .22s ease,
            box-shadow .22s ease;
    }


    .pd-quick-card:hover,
    .pd-donation-card:hover,
    .pd-choice-card:hover,
    .pd-benefit:hover,
    .pd-step:hover,
    .pd-article:hover{


<!-- ROW 2 -->
        transform:translateY(-4px);


<div class="ws-product-row">
        box-shadow:
            0 18px 38px
            rgba(88,49,116,.15);
    }


    .pd-menu a:hover{


<article class="ws-product-card">
        background:var(--pink-light);


<div class="ws-product-image">
        color:var(--pink-dark);
    }
}


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


</div>
/* =========================================================
  VERY SMALL MOBILE
========================================================= */


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


<div class="ws-brand">
    .positive-donation-page{
ARS
        padding:6px;
</div>
    }


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


<div class="ws-price">
    .pd-brand-text small{
        font-size:.65rem;
    }


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


<span class="ws-discount">
    .pd-hero-content{
ویژه
        min-height:285px;
</span>
        padding:23px 16px;
    }


</div>
    .pd-hero h1{
        font-size:1.5rem;
    }


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


<button class="ws-cart">
    .pd-donation-card{
دریافت مشاوره
        min-height:240px;
</button>
    }


<button class="ws-favorite">
    .pd-mobile-nav{
<i class="fa-regular fa-heart"></i>
        height:64px;
</button>
    }


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


</div>
</style>


</article>


<!-- =======================================================
    HEADER
======================================================= -->


<article class="ws-product-card">
<header class="pd-header">


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


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


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


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


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


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


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


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


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


</div>
        <a href="#donation">
            خدمات اهدا
        </a>


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


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


<button class="ws-favorite">
        <a href="#articles">
<i class="fa-regular fa-heart"></i>
            مجله
</button>
        </a>


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


</div>
    </nav>


</article>


    <a href="#contact"
      class="pd-header-btn">
        درخواست مشاوره
    </a>


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


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


<img
<!-- =======================================================
src="https://dl.faraghaib.ir/m/260018-01/260018-01-53.jpg"
    HERO
alt="دزدگیر اماکن ARS"
======================================================= -->
loading="lazy">


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


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


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


<h3 class="ws-product-title">
        <h1>
دزدگیر اماکن و سیستم اعلام سرقت
            گروه
</h3>
            <strong>
                اهدای مثبت بخشنده
            </strong>
        </h1>


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


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


<span class="ws-discount">
            <a href="#donation"
ویژه
              class="pd-btn pd-btn-main">
</span>
                مشاهده خدمات اهدا
            </a>


</div>
            <a href="#contact"
              class="pd-btn pd-btn-light">
                دریافت مشاوره
            </a>


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


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


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


</div>


</div>
<!-- =======================================================
    QUICK SERVICES
======================================================= -->


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


    <div class="pd-container">


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


<div class="ws-product-image">
            <a href="#egg"
              class="pd-quick-card">


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


</div>
                <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="#embryo"
              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="#surrogacy"
<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>
            <a href="#contact"
              class="pd-quick-card">


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


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


<!-- ======================================================
                <small>
    BENEFITS
                    شروع گفت‌وگو
====================================================== -->
                </small>


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


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


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


</div>
</section>




<div class="ws-benefits">
<!-- =======================================================
    START
======================================================= -->


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


<div class="ws-benefit-icon">
    <div class="pd-container">
<i class="fa-solid fa-camera"></i>
</div>


<strong>
        <div class="pd-start">
تجهیزات باکیفیت
</strong>


<span>
            <h2>
انتخاب تجهیزات مناسب برای هر پروژه
                از کدام مسیر می‌خواهید شروع کنید؟
</span>
            </h2>


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


            <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-headset"></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-shield-halved"></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-screwdriver-wrench"></i>
</div>


<strong>
                <span>
نصب و راه‌اندازی
                    خدمات اهدای مثبت
</strong>
                </span>


<span>
                <h2>
اجرای اصولی سیستم‌های نظارتی
                    خدمات اهدا
</span>
                </h2>


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


</div>
            </div>


</section>


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


<!-- ======================================================
    SECURITY CATEGORIES
====================================================== -->


<section class="ws-section">
                <article class="pd-donation-card"
                        id="egg">


<div class="ws-section-head">
                    <div class="pd-donation-image">


<h2 class="ws-section-title">
                        <img
دسته‌بندی تجهیزات امنیتی
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-15.jpg"
</h2>
                            alt="اهدای تخمک"
                            loading="lazy"
                        >


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


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


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


<div class="ws-category-grid">
                        <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-camera"></i>
                                من گیرنده هستم
</div>
                            </a>


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


<strong>
                        </div>
دوربین مداربسته
</strong>


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


</div>
                </article>


</a>


                <article class="pd-donation-card"
                        id="embryo">


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


<div class="ws-category-box-icon">
                        <img
<i class="fa-solid fa-video"></i>
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-36.png"
</div>
                            alt="اهدای جنین"
                            loading="lazy"
                        >


<div>
                    </div>


<strong>
                    <div class="pd-donation-content">
دوربین تحت شبکه
</strong>


<span>
                        <div class="pd-donation-icon">
دوربین IP و تجهیزات نظارت تصویری
                            ✦
</span>
                        </div>


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


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


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


<a href="#" class="ws-category-box">
                            <a href="#">
                                شرایط دریافت
                            </a>


<div class="ws-category-box-icon">
                            <a href="#">
<i class="fa-solid fa-hard-drive"></i>
                                مشاوره
</div>
                            </a>


<div>
                        </div>


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


<span>
                </article>
دستگاه‌های ضبط و مدیریت تصاویر
</span>


</div>


</a>
                <article class="pd-donation-card"
                        id="surrogacy">


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


<a href="#" class="ws-category-box">
                        <img
                            src="https://dl.faraghaib.ir/m/260009-01/260009-01-63.png"
                            alt="رحم جایگزین"
                            loading="lazy"
                        >


<div class="ws-category-box-icon">
                    </div>
<i class="fa-solid fa-bell"></i>
</div>
 
<div>


<strong>
                    <div class="pd-donation-content">
دزدگیر اماکن
</strong>


<span>
                        <div class="pd-donation-icon">
سیستم اعلام سرقت و حفاظت از اماکن
                            ♧
</span>
                        </div>


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


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


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


<a href="#" class="ws-category-box">
                            <a href="#">
                                آشنایی بیشتر
                            </a>


<div class="ws-category-box-icon">
                            <a href="#">
<i class="fa-solid fa-mobile-screen-button"></i>
                                مشاوره
</div>
                            </a>


<div>
                        </div>


<strong>
                    </div>
انتقال تصویر
</strong>


<span>
                </article>
مشاهده تصاویر دوربین از راه دور
</span>


</div>
            </div>


</a>
        </div>


</div>
    </div>


</section>
</section>




<!-- ======================================================
<!-- =======================================================
     BRANDS
     RECEIVER / DONOR
====================================================== -->
======================================================= -->


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


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


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


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


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


<div class="ws-brands">
            <p>
                برای دریافت اطلاعات متناسب با شرایط خود،
                یکی از مسیرهای زیر را انتخاب کنید.
            </p>


<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">


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


<a href="#" class="ws-brand-card">
                <h3>
                    من گیرنده هستم
                </h3>


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


</a>
                <a href="#">
                    مشاهده راهنمای گیرندگان
                </a>


            </div>


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


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


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


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


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


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


</a>
        </div>


    </div>


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


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-65.png"
alt="برند دوربین تحت شبکه"
loading="lazy">


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


<section class="pd-section">


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


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


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


</div>
            <h2>
                مسیر آگاهانه، تصمیم مطمئن‌تر
            </h2>


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


        </div>


<!-- ======================================================
    BEST SELLERS
====================================================== -->


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


<div class="ws-section-head">
            <a href="#" class="pd-image-slide">


<h2 class="ws-section-title">
                <img
پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
                    src="IMAGE-SLIDE-1"
</h2>
                    alt="مشاوره اهدای تخمک"
                    loading="lazy"
                >


<a href="#" class="ws-more">
                <span>
مشاهده همه
                    مشاوره اهدای تخمک
</a>
                </span>


</div>
            </a>




<div class="ws-product-slider"
            <a href="#" class="pd-image-slide">
data-product-slider>


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


                <span>
                    آشنایی با اهدای جنین
                </span>


<!-- ROW 1 -->
            </a>


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


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


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


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


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


</div>


<div class="ws-product-info">
            <a href="#" class="pd-image-slide">


<h3 class="ws-product-title">
                <img
دوربین مداربسته پرفروش ARS
                    src="IMAGE-SLIDE-4"
</h3>
                    alt="گروه اهدای مثبت بخشنده"
                    loading="lazy"
                >


<div class="ws-price">
                <span>
                    همراهی گروه اهدای مثبت
                </span>


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


</div>
        </div>


</div>
    </div>


</article>
</section>




<article class="ws-product-card">
<!-- =======================================================
    BENEFITS
======================================================= -->


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


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


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


<div class="ws-product-info">
            <span>
                چرا اهدای مثبت؟
            </span>


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


<div class="ws-price">
            <p>
                هدف گروه اهدای مثبت بخشنده،
                ایجاد مسیری روشن و آگاهانه برای مراجعین است.
            </p>


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


</div>


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


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


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


<article class="ws-product-card">
                <strong>
                    مشاوره
                </strong>


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


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


</div>


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


<h3 class="ws-product-title">
                <div class="pd-benefit-icon">
دستگاه DVR ضبط تصاویر
                    🔒
</h3>
                </div>


<div class="ws-price">
                <strong>
                    محرمانگی
                </strong>


<span class="ws-new-price">
                <small>
استعلام قیمت
                    احترام به حریم خصوصی
</span>
                </small>


</div>
            </div>


</div>


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


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


<article class="ws-product-card">
                <strong>
                    همراهی
                </strong>


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


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


</div>


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


<h3 class="ws-product-title">
                <div class="pd-benefit-icon">
دوربین مداربسته دید در شب
                    ✦
</h3>
                </div>


<div class="ws-price">
                <strong>
                    آگاهی
                </strong>


<span class="ws-new-price">
                <small>
استعلام قیمت
                    اطلاعات قابل فهم
</span>
                </small>


</div>
            </div>


</div>


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


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


                <strong>
                    پاسخگویی
                </strong>


<!-- ROW 2 -->
                <small>
                    ارتباط و راهنمایی
                </small>


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




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


<div class="ws-product-image">
                <div class="pd-benefit-icon">
                    +
                </div>


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


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


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


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


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


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


</div>


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


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


        <div class="pd-title">


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


<div class="ws-product-image">
            <h2>
                مسیر دریافت خدمات
            </h2>


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


</div>


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


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


<div class="ws-price">
                <div class="pd-step-number">
                    ۱
                </div>


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


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


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


</article>
                </div>


            </div>


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


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


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


</div>
                <div>


<div class="ws-product-info">
                    <strong>
                        بررسی شرایط
                    </strong>


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


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


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


</div>


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


</article>
                <div class="pd-step-number">
                    ۳
                </div>


                <div>


<article class="ws-product-card">
                    <strong>
                        انتخاب مسیر
                    </strong>


<div class="ws-product-image">
                    <small>
                        تصمیم‌گیری آگاهانه
                    </small>


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


</div>
            </div>


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


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


<div class="ws-price">
                <div class="pd-step-number">
                    ۴
                </div>


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


</div>
                    <strong>
                        ادامه مسیر
                    </strong>


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


</article>
                </div>


</div>
            </div>


</div>
        </div>


</div>
    </div>


</section>
</section>




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


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


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


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


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


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


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


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




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


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


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


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


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


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


<p>
                <div class="pd-article-body">
با مهم‌ترین نکات انتخاب دوربین مداربسته،
کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
</p>


<a href="#" class="ws-read">
                    <small>
مطالعه مقاله ←
                        اهدای تخمک
</a>
                    </small>


</div>
                    <h3>
                        سن مناسب برای اهدای تخمک
                    </h3>


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


                </div>


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


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


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


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


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


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


<p>
                <div class="pd-article-body">
مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
کاربردها و نکات انتخاب هر سیستم.
</p>


<a href="#" class="ws-read">
                    <small>
مطالعه مقاله ←
                        اهدای جنین
</a>
                    </small>


</div>
                    <h3>
                        اهدای جنین چیست؟
                    </h3>


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


                </div>


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


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


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


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


<div class="ws-article-content">
                    <img
                        src="IMAGE-ARTICLE-3"
                        alt="رحم جایگزین چیست"
                        loading="lazy"
                    >


<h3>
                </div>
بهترین مکان برای نصب دوربین مداربسته کجاست؟
</h3>


<p>
                <div class="pd-article-body">
نکات مهم انتخاب محل نصب دوربین برای افزایش
امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
</p>


<a href="#" class="ws-read">
                    <small>
مطالعه مقاله ←
                        رحم جایگزین
</a>
                    </small>


</div>
                    <h3>
                        رحم جایگزین چیست؟
                    </h3>


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


</div>
                </div>


</section>
            </article>


        </div>


<!-- ======================================================
    </div>
    CTA
====================================================== -->


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


<h2>
برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
</h2>


<p>
<!-- =======================================================
کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
    FAQ
و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
======================================================= -->
را پیشنهاد دهند.
</p>


<a href="#" class="ws-cta-btn">
<section class="pd-section"
        id="faq">


<i class="fa-solid fa-phone"></i>
    <div class="pd-container">


دریافت مشاوره تخصصی
        <div class="pd-title">


</a>
            <span>
                سوالات متداول
            </span>


</section>
            <h2>
                پاسخ به سوالات شما
            </h2>


        </div>


</div>


        <div class="pd-faq">


<script>
            <details>


document.addEventListener(
                <summary>
"DOMContentLoaded",
                    اهدای تخمک چیست؟
function(){
                </summary>


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


/* =========================================================
            </details>
  HERO SLIDER
  چرخش هر 3 ثانیه
========================================================= */


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


            <details>


if(hero){
                <summary>
                    شرایط اهدای تخمک چیست؟
                </summary>


    const track =
                <p>
    hero.querySelector(
                    شرایط اهدا باید بر اساس معیارهای پزشکی،
        ".ws-hero-track"
                    قانونی و ارزیابی‌های تخصصی بررسی شود.
    );
                </p>


    const slides =
            </details>
    hero.querySelectorAll(
        ".ws-hero-slide"
    );


    const dotsBox =
    hero.querySelector(
        ".ws-hero-dots"
    );


    let current=0;
            <details>


    let timer=null;
                <summary>
                    اهدای جنین چگونه انجام می‌شود؟
                </summary>


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


    /* -----------------------------------------
            </details>
      تنظیم ارتفاع واقعی هر اسلاید
      بدون Crop
    ----------------------------------------- */


    function setHeroHeight(){


        const activeSlide =
            <details>
        slides[current];


        if(!activeSlide) return;
                <summary>
                    رحم جایگزین چیست؟
                </summary>


        const image =
                <p>
        activeSlide.querySelector("img");
                    رحم جایگزین روشی است که در آن بارداری
                    توسط فرد دیگری برای متقاضیان انجام می‌شود
                    و جزئیات آن باید به صورت تخصصی بررسی شود.
                </p>


        if(!image) return;
            </details>




        function applyHeight(){
            <details>


            const containerWidth =
                <summary>
            hero.clientWidth;
                    چگونه برای مشاوره اقدام کنم؟
                </summary>


            const naturalWidth =
                <p>
            image.naturalWidth;
                    می‌توانید از طریق اطلاعات تماس مجموعه
                    برای دریافت راهنمایی اولیه اقدام کنید.
                </p>


             const naturalHeight =
             </details>
            image.naturalHeight;


        </div>


            if(
    </div>
                naturalWidth &&
                naturalHeight &&
                containerWidth
            ){


                const ratio =
</section>
                naturalHeight /
                naturalWidth;




                let height =
<!-- =======================================================
                containerWidth *
    CTA
                ratio;
======================================================= -->


<section class="pd-section"
        id="contact">


                /*
    <div class="pd-container">
                  محدودیت منطقی برای تصاویر خیلی بلند
                  فقط در موبایل
                */


                if(
        <div class="pd-cta">
                    window.innerWidth < 600 &&
                    height > window.innerHeight * .65
                ){


                    height =
            <h2>
                    window.innerHeight * .65;
                برای شروع مسیر خود تنها نیستید
            </h2>


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


            <a href="#">
                درخواست مشاوره
            </a>


                activeSlide.style.height =
        </div>
                height + "px";


            }
    </div>


        }
</section>




        if(image.complete){
<!-- =======================================================
    FOOTER
======================================================= -->


            applyHeight();
<footer class="pd-footer">


        }else{
    <div class="pd-footer-grid">


            image.addEventListener(
        <div>
                "load",
                applyHeight,
                {once:true}
            );


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


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


        </div>


    /* -----------------------------------------
      ساخت Dot
    ----------------------------------------- */


    slides.forEach(
         <div>
         function(slide,index){


             const dot =
             <h3>
            document.createElement(
                 خدمات
                 "button"
             </h3>
             );


             dot.type="button";
             <ul>


            dot.className=
                <li>
                 "ws-hero-dot";
                    <a href="#egg">
                        اهدای تخمک
                    </a>
                 </li>


            if(index===0){
                <li>
                    <a href="#embryo">
                        اهدای جنین
                    </a>
                </li>


                 dot.classList.add(
                 <li>
                     "active"
                     <a href="#surrogacy">
                 );
                        رحم جایگزین
                    </a>
                 </li>


            }
                <li>
                    <a href="#contact">
                        مشاوره
                    </a>
                </li>


             dot.setAttribute(
             </ul>
                "aria-label",
                "نمایش اسلاید "+
                (index+1)
            );


        </div>


            dot.addEventListener(
                "click",
                function(){


                    goToSlide(index);
        <div>


                    restart();
            <h3>
                ارتباط با ما
            </h3>


                }
             <ul>
             );


                <li>
                    تلفن: شماره تماس مجموعه
                </li>


            dotsBox.appendChild(dot);
                <li>
                    ایمیل: ایمیل مجموعه
                </li>


        }
                <li>
    );
                    آدرس: آدرس مجموعه
                </li>


            </ul>


    const dots =
         </div>
    dotsBox.querySelectorAll(
         ".ws-hero-dot"
    );


    </div>


    /* -----------------------------------------
      تغییر اسلاید
    ----------------------------------------- */


     function goToSlide(index){
     <div class="pd-footer-bottom">


         current=index;
         © تمامی حقوق برای گروه اهدای مثبت بخشنده محفوظ است.


    </div>


        track.style.transform =
</footer>
            "translateX(-"+
            (current*100)+
            "%)";




        dots.forEach(
<!-- =======================================================
            function(dot,i){
    MOBILE BOTTOM NAV
======================================================= -->


                dot.classList.toggle(
<nav class="pd-mobile-nav"
                    "active",
    aria-label="منوی اصلی موبایل">
                    i===current
                );


            }
    <a href="#donation"
        );
      class="active">


        <span>
            ♡
        </span>


         /*
         خدمات اهدا
          بعد از تغییر اسلاید
          ارتفاع واقعی عکس جدید
          محاسبه می‌شود.
        */


        setHeroHeight();
    </a>


    }


    <a href="#choice">


    function next(){
        <span>
            ◉
        </span>


         current =
         مسیر خدمات
        (current+1) %
        slides.length;


        goToSlide(current);
    </a>


    }


    <a href="#about">


    function start(){
        <span>
            ✦
        </span>


         timer =
         درباره ما
        setInterval(
            next,
            3000
        );


     }
     </a>




     function stop(){
     <a href="#articles">


         if(timer){
         <span>
            ▣
        </span>


            clearInterval(timer);
        مجله


            timer=null;
    </a>


        }


     }
     <a href="#contact">


        <span>
            ☎
        </span>


    function restart(){
        تماس


        stop();
    </a>


        start();
</nav>


    }


 
</div>
    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>

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

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

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

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

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

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

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

خدمات اهدا

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

انتخاب مسیر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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