فراغیب

تست: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۳۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!DOCTYPE html>
 
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>


<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta name="viewport"
<title>محمدرضا شایق | مدرس خودشناسی</title>
      content="width=device-width, initial-scale=1.0">


<meta name="description"
<meta name="description"
      content="محمدرضا شایق، مدرس خودشناسی و توسعه فردی؛ آموزش خودشناسی، رشد فردی، شناخت توانمندی‌ها و ساختن زندگی آگاهانه.">
content="محمدرضا شایق، مدرس خودشناسی و توسعه فردی؛ آموزش خودشناسی، آگاهی فردی و رشد شخصی.">


<meta name="keywords"
<link rel="preconnect" href="https://fonts.googleapis.com">
      content="محمدرضا شایق, مدرس خودشناسی, خودشناسی, توسعه فردی, رشد فردی, آموزش خودشناسی, شخصیت شناسی, آگاهی فردی">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


<meta name="author"
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap"
      content="محمدرضا شایق">
rel="stylesheet">


<title>محمدرضا شایق | مدرس خودشناسی و توسعه فردی</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">


<link rel="preconnect"
<style>
      href="https://fonts.googleapis.com">


<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin>


<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap"
#content {
      rel="stylesheet">
        width: 95% !important; /* اجازه بده عرض صفحه زیاد شود */
        max-width: none !important; /* هرگونه سقف عرض را حذف کن */
        margin: 0 auto !important; /* وسط‌چین کردن کانتینر بزرگ شده */
    }


<link rel="stylesheet"
    /* اگر قالب شما از کلاس‌های دیگری برای بدنه استفاده می‌کند */
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    .mw-body {
        width: 95% !important;
        max-width: none !important;
    }


<style>


/* =========================================================
/* =========================================================
خط ۴۰: خط ۴۳:
:root{
:root{


     --primary:#171717;
     --black:#050505;
     --primary-soft:#252525;
     --black-2:#0c0c0c;
    --black-3:#141414;


     --accent:#f4b942;
     --gold:#f4b942;
     --accent-dark:#d89a21;
     --gold-dark:#d79b20;
     --accent-light:#fff4d6;
     --gold-light:rgba(244,185,66,.12);
 
    --cream:#f8f6f0;
    --cream-dark:#eeeae0;


     --white:#ffffff;
     --white:#ffffff;
    --text:#f4f4f4;
    --muted:#a1a1a1;


    --text:#202124;
     --border:rgba(255,255,255,.09);
    --text-light:#666;
 
     --border:#e7e3da;
 
    --success:#3c8c68;


     --shadow:
     --shadow:
         0 15px 45px rgba(0,0,0,.08);
         0 15px 45px rgba(0,0,0,.35);


     --shadow-hover:
     --sidebar:105px;
        0 20px 55px rgba(0,0,0,.14);


     --radius:22px;
    /* فاصله سایدبار از لبه چپ و بالای مانیتور — فقط این عدد را تغییر بده */
 
     --sidebar-offset-top:-20px;
    --container:1180px;
    --sidebar-offset-left:40px;


}
}
خط ۸۴: خط ۸۱:
html{
html{
     scroll-behavior:smooth;
     scroll-behavior:smooth;
     scroll-padding-top:80px;
     scroll-padding-top:20px;
}
}


خط ۹۱: خط ۸۸:
     margin:0;
     margin:0;


     background:var(--cream);
     text-align:center;
 
    color:var(--text);


     font-family:
     font-family:
خط ۱۰۰: خط ۹۵:
         Arial,
         Arial,
         sans-serif;
         sans-serif;
    background:var(--black);
    color:var(--text);


     line-height:1.9;
     line-height:1.9;


     overflow-x:hidden;
     overflow-x:hidden;
}
body.section-locked{
    overflow:hidden;


}
}
خط ۱۱۸: خط ۱۲۳:


a{
a{
    text-decoration:none;


     color:inherit;
     color:inherit;
    text-decoration:none;


}
}
خط ۱۳۳: خط ۱۳۸:
}
}


button{
ul{


     cursor:pointer;
     padding:0;
 
    margin:0;
 
    list-style:none;


}
}


.container{


    width:min(
/* =========================================================
        calc(100% - 32px),
  PAGE
        var(--container)
========================================================= */
    );


    margin-inline:auto;
.page{


}
    min-height:100vh;


section{
     background:var(--black);
 
     position:relative;
 
    padding:
        70px 0;


}
}
خط ۱۶۱: خط ۱۶۳:


/* =========================================================
/* =========================================================
   TYPOGRAPHY
   LEFT ICON SIDEBAR
========================================================= */
========================================================= */


h1,
.left-sidebar{
h2,
margin-top:calc(var(--sidebar) + var(--sidebar-offset-top));
h3,
margin-left:calc(var(--sidebar) + var(--sidebar-offset-left));
h4,
p{


     margin-top:0;
     position:fixed;


}
    top:0;


h1{
    left:0;


     font-size:
     width:var(--sidebar);
        clamp(2rem, 7vw, 4.5rem);


     line-height:1.35;
     height:100vh;


     font-weight:900;
     background:#000;


     margin-bottom:18px;
     border-right:
        1px solid rgba(255,255,255,.08);


}
    z-index:9999;


h2{
    display:flex;


     font-size:
     flex-direction:column;
        clamp(1.7rem, 5vw, 2.7rem);


     line-height:1.4;
     align-items:center;
 
    font-weight:900;


     margin-bottom:14px;
     padding:25px 0;


}
}


h3{


    font-size:
/* =========================================================
        clamp(1.15rem, 3vw, 1.4rem);
  LOGO
========================================================= */


    line-height:1.5;
.sidebar-logo{


}
    width:100%;


p{
    text-align:center;


     color:var(--text-light);
     padding-bottom:25px;


}
    margin-bottom:20px;


.section-heading{
    border-bottom:
        1px solid rgba(255,255,255,.08);


    text-align:center;
}


    max-width:720px;
.logo-circle{


     margin:
     width:48px;
        0 auto 45px;


}
    height:48px;


.section-heading .eyebrow{
    margin:auto;


     display:inline-flex;
     border-radius:50%;


     align-items:center;
     display:grid;


     gap:8px;
     place-items:center;


     color:
     background:var(--gold);
        var(--accent-dark);


     font-size:.9rem;
     color:#000;


     font-weight:800;
     font-size:1.15rem;


     margin-bottom:8px;
     box-shadow:
        0 8px 25px rgba(244,185,66,.2);


}
}


.section-heading .eyebrow::before{
.sidebar-logo h2{


     content:"";
     display:none;
 
    width:28px;
 
    height:3px;
 
    background:var(--accent);
 
    border-radius:20px;


}
}


.section-heading p{
.sidebar-logo span{


     font-size:1rem;
     display:none;
 
    margin:0;


}
}
خط ۲۶۹: خط ۲۵۶:


/* =========================================================
/* =========================================================
   BUTTONS
   ICON MENU
========================================================= */
========================================================= */


.btn{
.sidebar-menu{
 
    width:100%;
 
    display:flex;


     display:inline-flex;
     flex-direction:column;


     align-items:center;
     align-items:center;


     justify-content:center;
     gap:8px;


    gap:10px;
}


    min-height:52px;
.sidebar-menu li{


     padding:
     width:100%;
        12px 22px;


     border-radius:14px;
     display:flex;


     font-weight:800;
     justify-content:center;
 
    border:2px solid transparent;
 
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;


}
}


.btn:hover{
.sidebar-menu a{


     transform:translateY(-2px);
     position:relative;


}
    width:50px;


.btn-primary{
    height:50px;


     background:var(--primary);
     display:grid;


     color:var(--white);
     place-items:center;


     box-shadow:
     border-radius:14px;
        0 10px 25px rgba(0,0,0,.12);


}
    color:#777;


.btn-primary:hover{
    font-size:1.05rem;


     background:var(--primary-soft);
     transition:
 
        background .2s ease,
    box-shadow:
        color .2s ease,
         0 14px 30px rgba(0,0,0,.17);
         transform .2s ease;


}
}


.btn-accent{


    background:var(--accent);
/* Tooltip */


    color:#171717;
.sidebar-menu a::after{


}
    content:attr(data-title);


.btn-outline{
    position:absolute;


     border-color:
     left:68px;
        var(--border);


     background:
     top:50%;
        rgba(255,255,255,.65);


}
    transform:
        translateY(-50%)
        translateX(-5px);


.btn-outline:hover{
    white-space:nowrap;


     border-color:
     background:#181818;
        var(--accent);


}
    border:
        1px solid rgba(255,255,255,.1);


    color:#fff;


/* =========================================================
    padding:6px 12px;
  HEADER
========================================================= */


.site-header{
    border-radius:8px;


     position:sticky;
     font-family:
        "Vazirmatn",
        sans-serif;


     top:0;
     font-size:.7rem;
 
    font-weight:600;


     z-index:1000;
     opacity:0;


     background:
     pointer-events:none;
        rgba(248,246,240,.94);


     backdrop-filter:
     transition:
         blur(15px);
         opacity .2s ease,
        transform .2s ease;


     border-bottom:
     box-shadow:
         1px solid var(--border);
         0 8px 25px rgba(0,0,0,.4);


}
}


.header-inner{
.sidebar-menu a:hover::after{


     min-height:72px;
     opacity:1;


     display:flex;
     transform:
        translateY(-50%)
        translateX(0);


    align-items:center;
}


    justify-content:space-between;
.sidebar-menu a:hover{


     gap:20px;
     color:var(--gold);


}
    background:var(--gold-light);


.logo{
    transform:translateX(2px);


    display:flex;
}


    align-items:center;
.sidebar-menu a.active{


     gap:10px;
     color:#000;


     font-weight:900;
     background:var(--gold);


     font-size:1.05rem;
     box-shadow:
        0 8px 25px rgba(244,185,66,.18);


}
}


.logo-mark{


    width:42px;
/* =========================================================
  SIDEBAR SOCIAL
========================================================= */


    height:42px;
.sidebar-bottom{


     display:grid;
     margin-top:auto;
 
    width:100%;


     place-items:center;
     padding-top:20px;


     border-radius:13px;
     border-top:
        1px solid rgba(255,255,255,.08);


     background:var(--primary);
     display:flex;


     color:var(--accent);
     justify-content:center;


}
}


.desktop-nav{
.sidebar-social{


     display:none;
     display:flex;
 
    flex-direction:column;
 
    gap:7px;


}
}


.desktop-nav ul{
.sidebar-social a{


     list-style:none;
     width:38px;
 
    height:38px;


     display:flex;
     display:grid;


     align-items:center;
     place-items:center;


     gap:25px;
     border-radius:10px;


     margin:0;
     background:#111;


     padding:0;
     color:#777;


}
    font-size:.8rem;


.desktop-nav a{
    transition:.2s;


    font-size:.9rem;
}


    font-weight:700;
.sidebar-social a:hover{


     color:#444;
     color:#000;


     transition:color .2s ease;
     background:var(--gold);


}
}


.desktop-nav a:hover{


    color:var(--accent-dark);
/* =========================================================
  MAIN
========================================================= */


}
.main-content{


.header-cta{
    margin-left:calc(var(--sidebar) + var(--sidebar-offset));


     display:none;
     min-width:0;


}
}
خط ۴۶۹: خط ۴۶۷:


/* =========================================================
/* =========================================================
   HERO
   MOBILE HEADER
========================================================= */
========================================================= */


.hero{
.mobile-header{


     padding:
     display:none;
        70px 0 55px;


    background:
}


        radial-gradient(
            circle at 90% 10%,
            rgba(244,185,66,.18),
            transparent 30%
        ),


        linear-gradient(
/* =========================================================
            180deg,
  CONTAINER
            var(--cream),
========================================================= */
            #fff
        );


}
.container{


.hero-grid{
    width:min(
        calc(100% - 70px),
        1120px
    );


     display:grid;
     margin-inline:auto;


    gap:35px;
}


    align-items:center;


}
/* =========================================================
  SECTION
========================================================= */


.hero-content{
.section{


     text-align:center;
     position:relative;


}
    padding:55px 0;


.hero-badge{
    min-height:auto;


     display:inline-flex;
     display:flex;


     align-items:center;
     align-items:center;


     gap:8px;
     background:#080808;


    padding:
}
        7px 14px;


    border-radius:50px;
.section:nth-child(even){


     background:
     background:#0d0d0d;
        var(--accent-light);


    color:
}
        var(--accent-dark);


    font-size:.85rem;


    font-weight:800;
/* =========================================================
  SECTION TITLE
========================================================= */


    margin-bottom:18px;
.section-title{


}
    width:100%;


.hero-badge i{
    text-align:center;


     font-size:.75rem;
     margin-bottom:28px;


}
}


.hero-title{
.section-title small{


     color:var(--primary);
     display:block;


}
    color:var(--gold);


.hero-title span{
    font-size:.8rem;


     color:var(--accent-dark);
     font-weight:800;


     display:block;
     margin-bottom:8px;


}
}


.hero-description{
.section-title h2{


     max-width:720px;
     margin:0;


     margin:
     color:#fff;
        0 auto 28px;


     font-size:
     font-size:
         clamp(1rem, 2.5vw, 1.15rem);
         clamp(1.9rem,4vw,2.8rem);
 
    font-weight:900;
 
    line-height:1.4;


}
}


.hero-buttons{
.section-title p{


     display:flex;
     max-width:650px;


     flex-direction:column;
     margin:12px 0 0;


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


     justify-content:center;
     font-size:.88rem;


}
}


.hero-features{


    display:grid;
/* =========================================================
  HERO
========================================================= */
 
.hero{


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


    gap:12px;
        radial-gradient(
            circle at 70% 25%,
            rgba(244,185,66,.09),
            transparent 32%
        ),


    margin-top:35px;
        #050505;


}
}


.hero-feature{
.hero-inner{


     background:var(--white);
     max-width:900px;


     border:
     margin:auto;
        1px solid var(--border);
 
    border-radius:18px;
 
    padding:18px 12px;


     text-align:center;
     text-align:center;
    box-shadow:var(--shadow);


}
}


.hero-feature i{
.hero-label{


     color:var(--accent-dark);
     display:inline-flex;


     font-size:1.3rem;
     align-items:center;


     margin-bottom:5px;
     gap:8px;


}
    padding:8px 17px;


.hero-feature strong{
    border-radius:50px;


     display:block;
     background:var(--gold-light);


     font-size:1.1rem;
     border:
        1px solid rgba(244,185,66,.15);


}
    color:var(--gold);


.hero-feature span{
    font-size:.78rem;


     color:var(--text-light);
     font-weight:800;


     font-size:.8rem;
     margin-bottom:22px;


}
}


.hero-label i{


/* =========================================================
    font-size:.45rem;
  ABOUT
 
========================================================= */
}


.about{
.hero h1{


     background:var(--white);
     margin:0;


}
    color:#fff;


.about-grid{
    font-size:
        clamp(2.5rem,7vw,5rem);


     display:grid;
     line-height:1.25;


     gap:35px;
     font-weight:900;


}
}


.about-image{
.hero h1 span{


     background:var(--cream);
     display:block;


     border-radius:
     color:var(--gold);
        var(--radius);


    overflow:hidden;
}
 
    border:
        1px solid var(--border);


    padding:12px;
.hero-subtitle{


}
    margin-top:12px;


.about-image img{
    color:#eee;


     width:100%;
     font-size:
        clamp(1.05rem,3vw,1.4rem);


     aspect-ratio:4 / 3;
     font-weight:700;


    object-fit:contain;
}


    border-radius:16px;
.hero-description{


     background:var(--cream);
     max-width:680px;


}
    margin:18px auto 30px;


.about-content{
    color:#999;


     align-self:center;
     font-size:.95rem;


}
}


.about-content h2{
.hero-buttons{


     margin-bottom:18px;
     display:flex;


}
    justify-content:flex-start;


.about-content > p{
    flex-wrap:wrap;


     font-size:1rem;
     gap:12px;


}
}


.about-list{
.btn{


     list-style:none;
     display:inline-flex;


     padding:0;
     align-items:center;


     margin:
     justify-content:center;
        25px 0;


}
    gap:8px;


.about-list li{
    min-height:50px;


     display:flex;
     padding:10px 23px;


     align-items:flex-start;
     border-radius:12px;


     gap:12px;
     font-size:.82rem;


     margin-bottom:12px;
     font-weight:800;


     font-weight:600;
     transition:
        transform .2s ease,
        box-shadow .2s ease;


}
}


.about-list i{
.btn:hover{


     color:var(--accent-dark);
     transform:translateY(-3px);
 
    margin-top:6px;


}
}


.about-info{
.btn-dark{


     display:grid;
     background:#fff;
 
    grid-template-columns:
        repeat(2,1fr);


     gap:10px;
     color:#000;


}
}


.about-info div{
.btn-gold{


     padding:14px;
     background:var(--gold);


     background:var(--cream);
     color:#000;


     border-radius:14px;
     box-shadow:
        0 10px 30px rgba(244,185,66,.12);


}
}


.about-info small{
.btn-outline{


     display:block;
     border:
        1px solid rgba(255,255,255,.15);


     color:var(--text-light);
     color:#fff;


     font-size:.75rem;
     background:#0d0d0d;


}
}


.about-info strong{


    font-size:.9rem;
/* =========================================================
  HERO INFO
========================================================= */


}
.hero-info{
 
 
/* =========================================================
  STATS
========================================================= */
 
.stats{
 
    background:var(--primary);
 
    color:var(--white);
 
}


.stats-grid{
    margin-top:50px;


     display:grid;
     display:grid;


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


     gap:12px;
     gap:12px;
خط ۷۹۷: خط ۷۷۷:
}
}


.stat{
.hero-info-box{


     text-align:center;
     padding:18px 10px;


     padding:22px 10px;
     background:#0e0e0e;


     border:
     border:
         1px solid rgba(255,255,255,.1);
         1px solid rgba(255,255,255,.08);


     border-radius:18px;
     border-radius:15px;
 
    background:
        rgba(255,255,255,.04);


}
}


.stat i{
.hero-info-box i{


     color:var(--accent);
     color:var(--gold);


     font-size:1.3rem;
     font-size:1.1rem;
 
    margin-bottom:6px;


}
}


.stat strong{
.hero-info-box strong{


     display:block;
     display:block;


     font-size:
     color:#fff;
        clamp(1.6rem,6vw,2.4rem);


     color:var(--white);
     margin-top:4px;


     line-height:1.3;
     font-size:.9rem;


}
}


.stat span{
.hero-info-box span{


     color:#ccc;
     display:block;


     font-size:.82rem;
    color:#777;
 
     font-size:.68rem;


}
}
خط ۸۴۶: خط ۸۲۲:


/* =========================================================
/* =========================================================
   SERVICES
   ABOUT
========================================================= */
========================================================= */


.services{
.about-grid{


     background:var(--cream);
     display:grid;


}
    grid-template-columns:
        .9fr 1.1fr;


.services-grid{
    gap:60px;


     display:grid;
     align-items:center;


    gap:16px;
}


}
.about-image{


.service-card{
    padding:10px;


     background:var(--white);
     background:#111;


     border:
     border:
         1px solid var(--border);
         1px solid rgba(255,255,255,.08);


     border-radius:
     border-radius:18px;
        var(--radius);


    padding:25px;
}


    box-shadow:
.about-image img{
        0 8px 25px rgba(0,0,0,.04);


     transition:
     width:100%;
        transform .2s ease,
        box-shadow .2s ease;


}
    aspect-ratio:4/5;


.service-card:hover{
    object-fit:contain;


     transform:translateY(-5px);
     border-radius:12px;


     box-shadow:var(--shadow-hover);
     background:#161616;


}
}


.service-icon{
.about-content h2{


     width:58px;
     margin:0 0 15px;


     height:58px;
     color:#fff;


     display:grid;
     font-size:
        clamp(1.8rem,4vw,2.5rem);


    place-items:center;
}


    border-radius:17px;
.about-content p{


     background:var(--accent-light);
     color:#999;


    color:var(--accent-dark);
     font-size:.9rem;
 
     font-size:1.4rem;
 
    margin-bottom:18px;


}
}


.service-card h3{
.about-list{


     margin-bottom:8px;
     margin-top:22px;


}
}


.service-card p{
.about-list li{


     font-size:.9rem;
     display:flex;


     margin-bottom:0;
     align-items:flex-start;


}
    gap:10px;


    margin-bottom:11px;


/* =========================================================
    color:#ddd;
  SKILLS
========================================================= */


.skills{
    font-size:.84rem;


     background:var(--white);
     font-weight:600;


}
}


.skills-grid{
.about-list i{


     display:grid;
     color:var(--gold);


     gap:18px;
     margin-top:6px;


}
}


.skill{


    padding:20px;
/* =========================================================
  COUNTERS
========================================================= */


    border:
.counters{
        1px solid var(--border);
 
    border-radius:18px;


     background:var(--cream);
     background:#000 !important;


}
}


.skill-top{
.counter-grid{


     display:flex;
     display:grid;


     align-items:center;
     grid-template-columns:
        repeat(6,1fr);


     justify-content:space-between;
     gap:12px;
 
    margin-bottom:10px;
 
    font-weight:800;


}
}


.progress{
.counter{


     height:8px;
     text-align:center;


     background:#e3dfd5;
     padding:28px 10px;


     border-radius:50px;
     border-right:
 
        1px solid rgba(255,255,255,.08);
    overflow:hidden;


}
}


.progress span{
.counter:last-child{


     display:block;
     border-right:0;


    height:100%;
}


    width:var(--value);
.counter i{


     background:var(--accent);
     color:var(--gold);


     border-radius:inherit;
     font-size:1.35rem;


}
}


.counter strong{


/* =========================================================
    display:block;
  COURSES
========================================================= */


.courses{
    color:#fff;


     background:var(--cream);
     font-size:2rem;


}
}


.courses-grid{
.counter span{


     display:grid;
     color:#777;


     gap:18px;
     font-size:.72rem;


}
}


.course-card{


    background:var(--white);
/* =========================================================
  SKILLS
========================================================= */


    border:
.skills-grid{
        1px solid var(--border);


     border-radius:
     max-width:1050px;
        var(--radius);


     overflow:hidden;
     margin:auto;


     box-shadow:
     display:grid;
        0 8px 25px rgba(0,0,0,.05);


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


.course-image{
    gap:22px 28px;


    padding:10px;
}


    background:#f4f1e9;
.skill{


}
    padding:24px;


.course-image img{
    background:#111;


     width:100%;
     border:
        1px solid rgba(255,255,255,.07);


     aspect-ratio:16 / 9;
     border-radius:18px;


     object-fit:contain;
     min-height:230px;


     border-radius:15px;
     text-align:right;


}
}


.course-body{
.skill-image{
 
    width:100%;
     padding:22px;
    height:135px;
    margin-bottom:18px;
    overflow:hidden;
     border-radius:14px;
    background:#181818;
    border:1px solid rgba(255,255,255,.06);
}


.skill-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
}


.course-tag{
.skill-title{


     display:inline-block;
     display:flex;


     padding:5px 10px;
     justify-content:space-between;


     background:var(--accent-light);
     color:#eee;


    color:var(--accent-dark);
     font-size:.83rem;
 
    border-radius:50px;
 
     font-size:.72rem;


     font-weight:800;
     font-weight:800;


     margin-bottom:10px;
     margin-bottom:9px;


}
}


.course-body h3{
.skill-title span:last-child{


     margin-bottom:8px;
     color:var(--gold);


}
}


.course-body p{
.skill-bar{


     font-size:.88rem;
     height:7px;


}
    background:#242424;


.course-meta{
    border-radius:50px;


     display:flex;
     overflow:hidden;


    flex-wrap:wrap;
}
 
    gap:10px;


    padding-top:12px;
.skill-bar span{


     margin-top:12px;
     display:block;


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


}
    height:100%;


.course-meta span{
    background:var(--gold);


     font-size:.75rem;
     border-radius:inherit;
 
    color:var(--text-light);


}
}
خط ۱٬۱۲۱: خط ۱٬۰۸۴:


/* =========================================================
/* =========================================================
   TIMELINE
   CARDS
========================================================= */
========================================================= */


.experience{
.cards-grid{


     background:var(--white);
     width:100%;


}
    display:grid;


.timeline{
    grid-template-columns:
        repeat(3,1fr);


     position:relative;
     gap:20px;
 
    max-width:850px;
 
    margin:auto;


}
}


.timeline-item{
.card{


     position:relative;
     background:#101010;


     padding:
     border:
         0 25px 35px;
         1px solid rgba(255,255,255,.08);


     border-right:
     border-radius:18px;
        2px solid var(--border);


}
    padding:28px 24px;


.timeline-item:last-child{
    box-shadow:
        0 10px 35px rgba(0,0,0,.25);


     border-right-color:
     transition:
        transparent;
        transform .2s ease,
        border-color .2s ease;


}
}


.timeline-dot{
.card:hover{


     position:absolute;
     transform:translateY(-5px);
 
    border-color:
        rgba(244,185,66,.3);
 
}


    right:-9px;
.card-icon{


     top:0;
     width:55px;


     width:16px;
     height:55px;


     height:16px;
     display:grid;


     border-radius:50%;
     place-items:center;


     background:var(--accent);
     border-radius:15px;


     border:
     background:var(--gold-light);
        4px solid var(--white);


     box-shadow:
     color:var(--gold);
        0 0 0 1px var(--accent);


}
    font-size:1.25rem;


.timeline-year{
    margin-bottom:18px;


    display:inline-block;
}


    color:var(--accent-dark);
.card h3{


     font-weight:800;
     margin:0 0 8px;


     font-size:.82rem;
     color:#fff;


     margin-bottom:4px;
     font-size:1.05rem;


}
}


.timeline-item h3{
.card p{


     margin-bottom:4px;
     margin:0;


}
    color:#888;


.timeline-item p{
     font-size:.8rem;
 
     font-size:.88rem;


}
}
خط ۱٬۲۱۱: خط ۱٬۱۷۳:


/* =========================================================
/* =========================================================
   TESTIMONIALS
   COURSE IMAGE
========================================================= */
========================================================= */


.testimonials{
.course-card{


     background:var(--cream);
     padding:0;
 
    overflow:hidden;


}
}


.testimonials-grid{
.card-image{


     display:grid;
     padding:9px;


     gap:18px;
     background:#080808;


}
}


.testimonial{
.card-image img{


     background:var(--white);
     width:100%;


     border:
     aspect-ratio:16/10;
        1px solid var(--border);
 
    object-fit:contain;


     border-radius:
     background:#151515;
        var(--radius);


     padding:25px;
     border-radius:12px;


}
}


.stars{
.card-content{


     color:var(--accent-dark);
     padding:22px;
 
    margin-bottom:12px;


}
}


.testimonial p{
.card-tag{


     font-size:.9rem;
     display:inline-block;


}
    padding:4px 10px;


.person{
    border-radius:50px;


     display:flex;
     background:var(--gold-light);


     align-items:center;
     color:var(--gold);


     gap:12px;
     font-size:.66rem;


     margin-top:18px;
     font-weight:800;


}
}


.person img{


    width:48px;
/* =========================================================
  TIMELINE
========================================================= */


    height:48px;
.timeline{


     border-radius:50%;
     max-width:850px;


     object-fit:cover;
     margin:auto;


}
}


.person strong{
.timeline-item{


     display:block;
     position:relative;
 
    padding:
        0 30px 38px;


     font-size:.9rem;
     border-right:
        2px solid #222;


}
}


.person span{
.timeline-item:last-child{


     color:var(--text-light);
     border-right-color:transparent;
 
    font-size:.75rem;


}
}


.timeline-item::before{


/* =========================================================
    content:"";
  BLOG
========================================================= */


.blog{
    position:absolute;


     background:var(--white);
     right:-8px;


}
    top:3px;
 
.blog-grid{


     display:grid;
     width:14px;


     gap:18px;
     height:14px;


}
    border-radius:50%;


.blog-card{
    background:var(--gold);


     background:var(--cream);
     box-shadow:
        0 0 0 4px #0d0d0d;


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


    border-radius:
.timeline-year{
        var(--radius);


     overflow:hidden;
     color:var(--gold);


}
    font-size:.76rem;


.blog-image{
    font-weight:800;
 
    padding:10px;


}
}


.blog-image img{
.timeline-item h3{


     width:100%;
     margin:5px 0;


     aspect-ratio:
     color:#fff;
        16 / 9;


     object-fit:contain;
     font-size:1.05rem;


    border-radius:15px;
}


    background:var(--white);
.timeline-item p{


}
    color:#888;


.blog-body{
    font-size:.81rem;


     padding:20px;
     margin:0;


}
}


.blog-date{


    color:var(--accent-dark);
/* =========================================================
  TESTIMONIAL
========================================================= */


    font-size:.75rem;
.testimonial{


     font-weight:800;
     background:#101010;


}
}


.blog-body h3{
.quote{


     margin:
     color:var(--gold);
        7px 0;
 
    font-size:1.8rem;


}
}


.blog-body p{
.testimonial p{


     font-size:.85rem;
    color:#999;
 
     font-size:.82rem;


}
}


.testimonial-person{


/* =========================================================
    display:flex;
  CTA
========================================================= */


.cta{
    align-items:center;


     padding:
     gap:10px;
        30px 0 70px;


     background:var(--white);
     margin-top:18px;


}
}


.cta-box{
.testimonial-avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--gold-light);
    border:1px solid rgba(244,185,66,.2);
    color:var(--gold);
    font-size:1.25rem;
}


    background:var(--primary);
.testimonial-person strong{


     color:var(--white);
     display:block;


     border-radius:
     color:#fff;
        28px;


     padding:
     font-size:.8rem;
        35px 22px;


    text-align:center;
}


    position:relative;
.testimonial-person span{


     overflow:hidden;
     display:block;


}
    color:#666;


.cta-box::before{
    font-size:.67rem;


    content:"";
}


    position:absolute;


    width:200px;
/* =========================================================
  BLOG
========================================================= */


    height:200px;
.blog-card{


     border-radius:50%;
     padding:0;


     background:
     overflow:hidden;
        rgba(244,185,66,.12);


    top:-100px;
}


     left:-70px;
.blog-card .card-image img{
 
     aspect-ratio:16/9;


}
}


.cta-box h2{
.blog-card .card-content{


     position:relative;
     padding:20px;


    color:var(--white);
}


}
.blog-date{


.cta-box p{
    color:var(--gold);


     position:relative;
     font-size:.68rem;


     max-width:650px;
     font-weight:800;


    margin:
}
        0 auto 20px;


    color:#ddd;
.blog-card h3{


}
    color:#fff;


.cta-box .btn{
    font-size:1rem;


     position:relative;
     margin:7px 0;


}
}
خط ۱٬۴۶۳: خط ۱٬۴۳۳:


/* =========================================================
/* =========================================================
   CONTACT
   CTA
========================================================= */
========================================================= */


.contact{
.cta{


     background:var(--cream);
     background:#000 !important;


}
}


.contact-grid{
.cta-inner{
 
    max-width:750px;


     display:grid;
     margin:auto;


     gap:25px;
     text-align:center;


}
}


.contact-info{
.cta h2{


     display:grid;
     margin:0 0 10px;
 
    color:#fff;


     gap:12px;
     font-size:
        clamp(1.9rem,4vw,2.8rem);


}
}


.contact-card{
.cta p{


     display:flex;
     color:#888;


     align-items:center;
     font-size:.88rem;


     gap:15px;
     margin-bottom:22px;


    padding:17px;
}


    background:var(--white);


    border:
/* =========================================================
        1px solid var(--border);
  CONTACT
========================================================= */


    border-radius:17px;
.contact-grid{


}
    display:grid;


.contact-icon{
    grid-template-columns:
        .8fr 1.2fr;


     width:48px;
     gap:35px;


    height:48px;
}


    flex:0 0 48px;
.contact-list{


     display:grid;
     display:grid;


     place-items:center;
     gap:12px;


    border-radius:14px;
}


    background:var(--accent-light);
.contact-item{


     color:var(--accent-dark);
     display:flex;


}
    align-items:center;
 
    gap:14px;


.contact-card small{
    padding:16px;


     display:block;
     background:#111;


     color:var(--text-light);
     border:
        1px solid rgba(255,255,255,.07);


     font-size:.72rem;
     border-radius:14px;


}
}


.contact-card strong{
.contact-icon{


     font-size:.9rem;
     width:45px;
 
    height:45px;


}
    flex:0 0 45px;


.contact-form{
    display:grid;


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


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


     border-radius:
     background:var(--gold-light);
        var(--radius);


     padding:22px;
     color:var(--gold);


}
}


.form-grid{
.contact-item small{
 
    display:block;


     display:grid;
     color:#666;


     gap:12px;
     font-size:.67rem;


}
}


.form-group label{
.contact-item strong{


     display:block;
     color:#eee;


     font-size:.8rem;
     font-size:.8rem;


    font-weight:800;
}


    margin-bottom:6px;
.contact-form{


}
    background:#101010;
 
.form-group input,
.form-group textarea{


     width:100%;
     padding:28px;


     border:
     border:
         1px solid var(--border);
         1px solid rgba(255,255,255,.08);


     background:var(--cream);
     border-radius:18px;


    border-radius:12px;
}


    padding:
.form-grid{
        13px 14px;


     outline:none;
     display:grid;


     font-size:.9rem;
     grid-template-columns:
        repeat(2,1fr);


     transition:
     gap:15px;
        border-color .2s ease,
        box-shadow .2s ease;


}
}


.form-group input:focus,
.form-group.full{
.form-group textarea:focus{
 
    border-color:var(--accent);


     box-shadow:
     grid-column:1/-1;
        0 0 0 3px rgba(244,185,66,.15);


}
}


.form-group textarea{
.form-group label{


     min-height:140px;
     display:block;


     resize:vertical;
     color:#ddd;


}
    font-size:.74rem;


    font-weight:800;


/* =========================================================
    margin-bottom:5px;
  FOOTER
 
========================================================= */
}
 
.form-group input,
.form-group textarea{


.footer{
    width:100%;


     background:var(--primary);
     padding:12px 14px;


     color:var(--white);
     border:
        1px solid rgba(255,255,255,.08);


     padding:
     border-radius:10px;
        45px 0 95px;


}
    background:#080808;


.footer-grid{
    color:#fff;


     display:grid;
     outline:none;


     gap:25px;
     font-size:.78rem;


}
}


.footer-logo{
.form-group input::placeholder,
.form-group textarea::placeholder{


     display:flex;
     color:#555;


    align-items:center;
}


    gap:10px;
.form-group textarea{


     font-weight:900;
     min-height:130px;


     margin-bottom:12px;
     resize:vertical;


}
}


.footer p{
.form-group input:focus,
 
.form-group textarea:focus{
    color:#bbb;


     font-size:.85rem;
     border-color:var(--gold);


}
}


.footer-links{


    list-style:none;
/* =========================================================
  FOOTER
========================================================= */


    padding:0;
.footer{


     margin:0;
     padding:30px 0;


     display:grid;
     background:#000;


     gap:7px;
     color:#666;


}
    text-align:center;


.footer-links a{
    border-top:
        1px solid rgba(255,255,255,.07);


    color:#ccc;
}


     font-size:.82rem;
.footer strong{
 
     color:var(--gold);


}
}


.socials{
.footer p{


     display:flex;
     margin:0;


     gap:9px;
     font-size:.72rem;
 
    margin-top:15px;


}
}


.socials a{


    width:42px;
/* =========================================================
  TABLET
========================================================= */


    height:42px;
@media(max-width:900px){


     display:grid;
     .left-sidebar{


    place-items:center;
        display:none;


     border-radius:12px;
     }


     background:
     .main-content{
        rgba(255,255,255,.07);


    color:var(--accent);
        margin-left:0;


}
    }


.footer-bottom{
    .mobile-header{


    margin-top:30px;
        position:sticky;


    padding-top:20px;
        top:0;


    border-top:
        z-index:999;
        1px solid rgba(255,255,255,.1);


    text-align:center;
        height:62px;


    color:#aaa;
        display:flex;


    font-size:.75rem;
        align-items:center;


}
        justify-content:center;


        background:#000;


/* =========================================================
        border-bottom:
  MOBILE BOTTOM NAV
            1px solid rgba(255,255,255,.08);
========================================================= */


.mobile-bottom-nav{
    }


     position:fixed;
     .mobile-header strong{


    bottom:0;
        color:#fff;


    right:0;
        font-size:.88rem;


     left:0;
     }


     z-index:2000;
     .container{


    height:68px;
        width:
            min(
                calc(100% - 45px),
                720px
            );


     display:flex;
     }


     align-items:center;
     .section{


    justify-content:space-around;
        padding:45px 0;


     background:
     }
        rgba(23,23,23,.97);


     backdrop-filter:
     .about-grid{
        blur(15px);


    border-top:
        grid-template-columns:1fr;
        1px solid rgba(255,255,255,.1);


    padding:
        gap:35px;
        5px 5px
        env(safe-area-inset-bottom);


}
    }


.mobile-bottom-nav a{
    .about-image{


    flex:1;
        max-width:550px;


    display:flex;
        margin:auto;


     flex-direction:column;
     }


     align-items:center;
     .cards-grid{


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


     gap:2px;
     }


     color:#aaa;
     .contact-grid{


    font-size:.65rem;
        grid-template-columns:1fr;


     font-weight:700;
     }


}
}


.mobile-bottom-nav i{


    font-size:1.05rem;
/* =========================================================
  MOBILE
========================================================= */


}
@media(max-width:600px){


.mobile-bottom-nav a.active,
    html{
.mobile-bottom-nav a:hover{


    color:var(--accent);
        scroll-padding-top:65px;


}
    }


    .container{


/* =========================================================
        width:
  TABLET
            calc(100% - 28px);
========================================================= */


@media (min-width:600px){
    }


     .container{
     .section{
 
        min-height:auto;


         width:min(
         padding:35px 0;
            calc(100% - 48px),
            var(--container)
        );


     }
     }
خط ۱٬۸۲۸: خط ۱٬۸۰۴:


         padding:
         padding:
             90px 0 70px;
             70px 0 50px;


     }
     }


     .hero-buttons{
     .hero h1{


         flex-direction:row;
         font-size:
            clamp(2.2rem,12vw,3.3rem);


     }
     }


     .hero-features{
     .hero-subtitle{


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


     }
     }


     .stats-grid{
     .hero-description{


         grid-template-columns:
         font-size:.86rem;
            repeat(4,1fr);


     }
     }


     .services-grid{
     .hero-buttons{


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


     }
     }


     .courses-grid{
     .hero-buttons .btn{


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


     }
     }


     .testimonials-grid{
     .hero-info{


         grid-template-columns:
         grid-template-columns:
             repeat(2,1fr);
             repeat(2,1fr);
        margin-top:35px;


     }
     }


     .blog-grid{
     .counter-grid{


         grid-template-columns:
         grid-template-columns:
خط ۱٬۸۸۰: خط ۱٬۸۵۵:
     }
     }


     .footer-grid{
     .counter{


         grid-template-columns:
         border-right:0;
             2fr 1fr 1fr;
 
        border-bottom:
             1px solid rgba(255,255,255,.08);


     }
     }


}
    .counter strong{


        font-size:1.6rem;


/* =========================================================
    }
  DESKTOP
========================================================= */


@media (min-width:900px){
    .skills-grid{


    section{
        grid-template-columns:1fr;


        padding:
    }
            95px 0;


    .skill-image{
        height:155px;
     }
     }


     .site-header{
     .cards-grid{


         position:sticky;
         grid-template-columns:1fr;


     }
     }


     .desktop-nav{
     .card{


         display:block;
         padding:22px 18px;


     }
     }


     .header-cta{
     .card-image{


         display:inline-flex;
         padding:8px;


     }
     }


     .mobile-bottom-nav{
     .card-image img{


         display:none;
         aspect-ratio:16/10;
 
        object-fit:contain;


     }
     }


     .footer{
     .timeline-item{


         padding-bottom:45px;
         padding-right:24px;


     }
     }


     .hero-grid{
     .form-grid{
 
        grid-template-columns:1fr;


        grid-template-columns:
    }
            1fr;


        min-height:
    .form-group.full{
            600px;


         text-align:center;
         grid-column:auto;


     }
     }


     .hero-content{
     .contact-form{


         max-width:900px;
         padding:20px;
 
        margin:auto;


     }
     }


     .about-grid{
     .section-title{


         grid-template-columns:
         margin-bottom:20px;
            minmax(0,.9fr)
            minmax(0,1.1fr);


        align-items:center;
    }


         gap:60px;
    .section-title h2{
 
         font-size:1.7rem;


     }
     }


     .services-grid{
     .section-title p{


         grid-template-columns:
         font-size:.8rem;
            repeat(3,1fr);


     }
     }


    .skills-grid{
}


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


    }
/* =========================================================
  EXTRA SMALL
========================================================= */


    .courses-grid{
@media(max-width:380px){


        grid-template-columns:
    .container{
            repeat(3,1fr);


    }
         width:
 
             calc(100% - 22px);
    .testimonials-grid{
 
         grid-template-columns:
             repeat(3,1fr);


     }
     }


     .blog-grid{
     .hero-info-box{


         grid-template-columns:
         padding:14px 7px;
            repeat(3,1fr);


     }
     }


     .contact-grid{
     .hero-info-box strong{
 
        grid-template-columns:
            .85fr 1.15fr;


         align-items:start;
         font-size:.8rem;


     }
     }


     .form-grid{
     .hero-info-box span{


         grid-template-columns:
         font-size:.6rem;
            repeat(2,1fr);


     }
     }


    .form-group.full{
}


        grid-column:
            1 / -1;


     }
.card-content,
.contact-item > div:last-child,
.form-group label,
.form-group input,
.form-group textarea{
     text-align:center;
}


.footer{
    text-align:center;
}
}


.skill-image + .skill-title{
    margin-top:0;
}


/* =========================================================
/* =========================================================
   LARGE DESKTOP
   FINAL ALIGNMENT & SPACING
========================================================= */
========================================================= */


@media (min-width:1200px){
.section > .container{
    width:min(calc(100% - 50px),1180px);
    margin-inline:auto;
}


     .hero{
.section-title,
.about-content,
.card,
.skill,
.timeline,
.contact-list,
.contact-form{
     text-align:center;
}
 
.hero-inner,
.hero-info,
.about-grid,
.skills-grid,
.cards-grid,
.timeline,
.contact-grid,
.cta-inner{
    margin-inline:auto;
}
 
.about-grid{
    max-width:1080px;
}


        padding-top:110px;
.cards-grid{
    max-width:1180px;
}


@media(max-width:900px){
    .section > .container{
        width:min(calc(100% - 40px),720px);
     }
     }


     .hero-content{
     .counter-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


        max-width:950px;
@media(max-width:600px){
    .section > .container{
        width:calc(100% - 28px);
    }


    .hero-buttons{
        justify-content:stretch;
     }
     }


    .cards-grid{
        gap:15px;
    }
}
}


/* =========================================================
/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   REDUCED MOTION
========================================================= */
========================================================= */


@media (prefers-reduced-motion:reduce){
@media(prefers-reduced-motion:reduce){
 
    html{
 
        scroll-behavior:auto;
 
    }


     *,
     *,
     *::before,
     *::before,
     *::after{
     *::after{
        scroll-behavior:auto !important;


         transition:none !important;
         transition:none !important;
خط ۲٬۰۷۱: خط ۲٬۰۸۳:
}
}


</style>


/* =========================================================
</head>
  SMALL MOBILE
========================================================= */


@media (max-width:380px){


    .container{
<body>


        width:
<div class="page">
            calc(100% - 24px);


    }


    section{
<!-- =====================================================
    LEFT ICON MENU
===================================================== -->


        padding:
<aside class="left-sidebar">
            55px 0;


    }


     .hero-features{
     <div class="sidebar-logo">


         gap:8px;
         <div class="logo-circle">


    }
            <i class="fa-solid fa-user"></i>


    .hero-feature{
        </div>


         padding:
         <h2>
             15px 7px;
             محمدرضا شایق
        </h2>


    }
        <span>
            مدرس خودشناسی
        </span>


     .hero-feature strong{
     </div>


        font-size:.95rem;


     }
     <nav>


    .hero-feature span{
        <ul class="sidebar-menu">


        font-size:.7rem;


    }
            <li>


    .about-info{
                <a href="#home"
                  class="active"
                  data-title="خانه">


        gap:8px;
                    <i class="fa-solid fa-house"></i>


    }
                </a>


}
            </li>




/* =========================================================
            <li>
  PRINT
========================================================= */


@media print{
                <a href="#about"
                  data-title="درباره من">


    .site-header,
                    <i class="fa-solid fa-user"></i>
    .mobile-bottom-nav,
    .hero-buttons,
    .cta,
    .contact-form{


        display:none !important;
                </a>


    }
            </li>


    body{


        background:#fff;
            <li>


    }
                <a href="#skills"
                  data-title="تخصص‌ها">


}
                    <i class="fa-solid fa-chart-simple"></i>


                </a>


/* =========================================================
            </li>
  SCHEMA VISIBILITY
========================================================= */


.schema-hidden{


    display:none;
            <li>


}
                <a href="#services"
                  data-title="آموزش‌ها">


</style>
                    <i class="fa-solid fa-layer-group"></i>


<!-- ========================================================
                </a>
    PERSON SCHEMA
========================================================= -->


<script type="application/ld+json">
            </li>
{
    "@context":"https://schema.org",
    "@type":"Person",
    "name":"محمدرضا شایق",
    "jobTitle":"مدرس خودشناسی",
    "description":"مدرس خودشناسی و توسعه فردی",
    "knowsAbout":[
        "خودشناسی",
        "توسعه فردی",
        "رشد فردی",
        "آگاهی فردی",
        "شناخت توانمندی‌ها"
    ]
}
</script>


</head>


<body>
            <li>


                <a href="#courses"
                  data-title="دوره‌ها">


<!-- ========================================================
                    <i class="fa-solid fa-graduation-cap"></i>
    HEADER
========================================================= -->


<header class="site-header">
                </a>


    <div class="container header-inner">
            </li>


        <a href="#home"
          class="logo"
          aria-label="محمدرضا شایق">


             <span class="logo-mark">
             <li>
                <i class="fa-solid fa-user"></i>
            </span>


            <span>
                <a href="#experience"
                محمدرضا شایق
                  data-title="سوابق">
            </span>


        </a>
                    <i class="fa-solid fa-briefcase"></i>


                </a>


        <nav class="desktop-nav"
            </li>
            aria-label="منوی اصلی">


            <ul>


                <li>
            <li>
                    <a href="#home">
                        خانه
                    </a>
                </li>


                 <li>
                 <a href="#testimonials"
                    <a href="#about">
                  data-title="نظرات">
                        درباره من
                    </a>
                </li>


                <li>
                     <i class="fa-solid fa-comments"></i>
                     <a href="#services">
                        حوزه فعالیت
                    </a>
                </li>


                 <li>
                 </a>
                    <a href="#courses">
                        دوره‌ها
                    </a>
                </li>


                <li>
            </li>
                    <a href="#experience">
                        سوابق
                    </a>
                </li>


                <li>
                    <a href="#blog">
                        مقالات
                    </a>
                </li>


                <li>
            <li>
                    <a href="#contact">
                        تماس
                    </a>
                </li>


            </ul>
                <a href="#blog"
                  data-title="مقالات">


        </nav>
                    <i class="fa-solid fa-book-open"></i>


                </a>


        <a href="#contact"
            </li>
          class="btn btn-primary header-cta">


            <i class="fa-regular fa-paper-plane"></i>


             ارتباط با من
             <li>


        </a>
                <a href="#contact"
                  data-title="ارتباط با من">


    </div>
                    <i class="fa-solid fa-envelope"></i>


</header>
                </a>


            </li>


<!-- ========================================================
    HERO
========================================================= -->


<main>
        </ul>


<section class="hero"
    </nav>
        id="home">


    <div class="container">


        <div class="hero-grid">
    <div class="sidebar-bottom">


            <div class="hero-content">
        <div class="sidebar-social">


                <div class="hero-badge">
            <a href="#" title="اینستاگرام">


                    <i class="fa-solid fa-circle"></i>
                <i class="fa-brands fa-instagram"></i>


                    مدرس خودشناسی و توسعه فردی
            </a>


                </div>
            <a href="#" title="تلگرام">


                <i class="fa-brands fa-telegram"></i>


                <h1 class="hero-title">
            </a>


                    من
            <a href="#" title="واتساپ">
                    <span>
                        محمدرضا شایق
                    </span>


                    هستم
                <i class="fa-brands fa-whatsapp"></i>


                </h1>
            </a>


        </div>


                <p class="hero-description">
    </div>


                    در مسیر خودشناسی، آگاهی و رشد فردی
</aside>
                    همراه شما هستم تا شناخت عمیق‌تری از
                    خود، توانمندی‌ها و مسیر زندگی‌تان پیدا کنید.


                </p>


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


                <div class="hero-buttons">
<header class="mobile-header ">


                    <a href="#courses"
    <strong>
                      class="btn btn-primary">
        محمدرضا شایق | مدرس خودشناسی
    </strong>


                        <i class="fa-solid fa-graduation-cap"></i>
</header>


                        مشاهده دوره‌ها


                    </a>
<!-- =====================================================
    MAIN
===================================================== -->


<main class="main-content full-width-page">


                    <a href="#about"
                      class="btn btn-outline">


                        <i class="fa-solid fa-user"></i>
<!-- =====================================================
    HOME
===================================================== -->


                        بیشتر درباره من
<section class="section hero"
        id="home">


                    </a>
    <div class="container">


                </div>
        <div class="hero-inner">




                <div class="hero-features">
            <div class="hero-label">


                    <div class="hero-feature">
                <i class="fa-solid fa-circle"></i>


                        <i class="fa-solid fa-brain"></i>
                مدرس خودشناسی و توسعه فردی


                        <strong>
            </div>
                            خودشناسی
                        </strong>


                        <span>
                            شناخت عمیق‌تر خود
                        </span>


                    </div>
            <h1>


                محمدرضا


                     <div class="hero-feature">
                <span>
                     شایق
                </span>


                        <i class="fa-solid fa-seedling"></i>
            </h1>


                        <strong>
                            رشد فردی
                        </strong>


                        <span>
            <div class="hero-subtitle">
                            ساختن نسخه بهتر خود
                        </span>


                    </div>
                مدرس خودشناسی و آگاهی فردی


            </div>


                    <div class="hero-feature">


                        <i class="fa-solid fa-compass"></i>
            <p class="hero-description">


                        <strong>
                خودشناسی می‌تواند نقطه شروع یک تغییر واقعی
                            آگاهی
                در زندگی باشد؛ مسیری برای شناخت بهتر خود،
                        </strong>
                توانمندی‌ها، احساسات و انتخاب‌های آگاهانه‌تر.


                        <span>
            </p>
                            انتخاب آگاهانه
                        </span>


                    </div>


            <div class="hero-buttons">


                    <div class="hero-feature">
                <a href="#about"
                  class="btn btn-gold">


                        <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-user"></i>


                        <strong>
                    درباره من
                            آرامش
                        </strong>


                        <span>
                </a>
                            ارتباط بهتر با خود
                        </span>


                    </div>


                 </div>
                 <a href="#courses"
                  class="btn btn-outline">


            </div>
                    <i class="fa-solid fa-graduation-cap"></i>


        </div>
                    مشاهده دوره‌ها


    </div>
                </a>


</section>
            </div>




<!-- ========================================================
            <div class="hero-info">
    ABOUT
========================================================= -->


<section class="about"
        id="about">


    <div class="container">
                <div class="hero-info-box">


        <div class="about-grid">
                    <i class="fa-solid fa-brain"></i>


                    <strong>
                        خودشناسی
                    </strong>


            <div class="about-image">
                    <span>
                        شناخت بهتر خود
                    </span>


                 <!-- تصویر را با عکس واقعی جایگزین کنید -->
                 </div>


                <img
                    src="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1000&q=85"
                    alt="محمدرضا شایق مدرس خودشناسی"
                    loading="lazy">


            </div>
                <div class="hero-info-box">


                    <i class="fa-solid fa-seedling"></i>


            <div class="about-content">
                    <strong>
                        رشد فردی
                    </strong>


                <div class="section-heading"
                     <span>
                    style="text-align:right;margin:0 0 20px;">
                         مسیر رشد
 
                     <span class="eyebrow">
                         درباره من
                     </span>
                     </span>
                    <h2>
                        خودشناسی؛
                        شروع یک تغییر واقعی
                    </h2>


                 </div>
                 </div>




                 <p>
                 <div class="hero-info-box">


                     خودشناسی برای من فقط شناخت ویژگی‌های شخصیتی
                     <i class="fa-solid fa-lightbulb"></i>
                    نیست؛ بلکه مسیری برای شناخت افکار، احساسات،
                    توانمندی‌ها، ارزش‌ها و انتخاب‌های زندگی است.


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


                    <span>
                        انتخاب آگاهانه
                    </span>


                 <p>
                 </div>


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


                 </p>
                 <div class="hero-info-box">


                    <i class="fa-solid fa-heart"></i>


                <ul class="about-list">
                    <strong>
                        آرامش
                    </strong>


                     <li>
                     <span>
                        ارتباط با خود
                    </span>


                        <i class="fa-solid fa-check"></i>
                </div>


                        شناخت نقاط قوت و زمینه‌های قابل رشد
                <div class="hero-info-box">


                     </li>
                     <i class="fa-solid fa-bullseye"></i>


                    <strong>
                        تمرکز
                    </strong>


                     <li>
                     <span>
                        هدفمندی بیشتر
                    </span>


                        <i class="fa-solid fa-check"></i>
                </div>


                        افزایش آگاهی نسبت به افکار و احساسات


                    </li>
            </div>


        </div>


                    <li>
    </div>


                        <i class="fa-solid fa-check"></i>
</section>


                        کمک به تصمیم‌گیری آگاهانه‌تر


                    </li>
<!-- =====================================================
    ABOUT
===================================================== -->


<section class="section"
        id="about">


                    <li>
    <div class="container">


                        <i class="fa-solid fa-check"></i>
        <div class="section-title">


                        طراحی مسیر شخصی برای رشد و تغییر
            <small>
                درباره من
            </small>


                    </li>
            <h2>
                شناخت خود، آغاز مسیر تغییر
            </h2>


                </ul>
        </div>




                <div class="about-info">
        <div class="about-grid">


                    <div>


                        <small>
            <div class="about-image">
                            نام
                        </small>


                        <strong>
                <img
                            محمدرضا شایق
                src="https://dl.faraghaib.ir/m/260021-01/260021-01-16.png"
                        </strong>
                alt="محمدرضا شایق مدرس خودشناسی"
                loading="lazy">


                    </div>
            </div>




                    <div>
            <div class="about-content" style="text-align:right;">


                        <small>
                <h2>
                            حوزه فعالیت
                    همراه شما در مسیر خودشناسی
                        </small>
                </h2>


                        <strong>
                <p>
                            خودشناسی و توسعه فردی
                        </strong>


                     </div>
                     من محمدرضا شایق، مدرس خودشناسی هستم
                    و تلاش می‌کنم مفاهیم خودشناسی و رشد فردی
                    را به شکلی ساده، کاربردی و قابل استفاده
                    در زندگی روزمره آموزش دهم.


                </p>


                    <div>
                <p>


                        <small>
                    هدف این آموزش‌ها کمک به شناخت بهتر افکار،
                            نوع آموزش
                    احساسات، توانمندی‌ها، ارزش‌ها و الگوهای
                        </small>
                    رفتاری است تا هر فرد بتواند مسیر زندگی خود
                    را آگاهانه‌تر انتخاب کند.


                        <strong>
                </p>
                            حضوری و آنلاین
                        </strong>


                    </div>


                <ul class="about-list">


                     <div>
                     <li>
                        <i class="fa-solid fa-check"></i>
                        شناخت بهتر ویژگی‌ها و توانمندی‌های فردی
                    </li>


                         <small>
                    <li>
                            تمرکز اصلی
                         <i class="fa-solid fa-check"></i>
                        </small>
                        افزایش آگاهی نسبت به افکار و احساسات
                    </li>


                         <strong>
                    <li>
                            آگاهی و رشد فردی
                         <i class="fa-solid fa-check"></i>
                        </strong>
                        شناخت موانع رشد شخصی
                    </li>


                     </div>
                     <li>
                        <i class="fa-solid fa-check"></i>
                        حرکت آگاهانه‌تر در مسیر زندگی
                    </li>


                 </div>
                 </ul>


             </div>
             </div>
خط ۲٬۵۸۳: خط ۲٬۵۳۸:




<!-- ========================================================
<!-- =====================================================
     STATS
     COUNTERS
========================================================= -->
===================================================== -->


<section class="stats">
<section class="section counters">


     <div class="container">
     <div class="container">


         <div class="stats-grid">
         <div class="counter-grid">


             <div class="stat">
 
             <div class="counter">


                 <i class="fa-solid fa-users"></i>
                 <i class="fa-solid fa-users"></i>
خط ۲٬۶۰۲: خط ۲٬۵۵۸:


                 <span>
                 <span>
                     همراه آموزشی
                     شرکت‌کننده
                 </span>
                 </span>


خط ۲٬۶۰۸: خط ۲٬۵۶۴:




             <div class="stat">
             <div class="counter">


                 <i class="fa-solid fa-book-open"></i>
                 <i class="fa-solid fa-book"></i>


                 <strong>
                 <strong>
خط ۲٬۶۱۷: خط ۲٬۵۷۳:


                 <span>
                 <span>
                     کارگاه و دوره
                     دوره و کارگاه
                 </span>
                 </span>


خط ۲٬۶۲۳: خط ۲٬۵۷۹:




             <div class="stat">
             <div class="counter">


                 <i class="fa-solid fa-clock"></i>
                 <i class="fa-solid fa-clock"></i>
خط ۲٬۶۳۸: خط ۲٬۵۹۴:




             <div class="stat">
             <div class="counter">


                 <i class="fa-solid fa-star"></i>
                 <i class="fa-solid fa-star"></i>
خط ۲٬۶۴۷: خط ۲٬۶۰۳:


                 <span>
                 <span>
                     رضایت شرکت‌کنندگان
                     رضایت
                </span>
 
            </div>
 
            <div class="counter">
 
                <i class="fa-solid fa-chalkboard-user"></i>
 
                <strong>
                    50+
                </strong>
 
                <span>
                    کارگاه آموزشی
                </span>
 
            </div>
 
            <div class="counter">
 
                <i class="fa-solid fa-award"></i>
 
                <strong>
                    10+
                </strong>
 
                <span>
                    سال تجربه
                 </span>
                 </span>


             </div>
             </div>


         </div>
         </div>
خط ۲٬۶۵۹: خط ۲٬۶۴۴:




<!-- ========================================================
<!-- =====================================================
     SERVICES
     SKILLS
========================================================= -->
===================================================== -->


<section class="services"
<section class="section"
         id="services">
         id="skills">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 حوزه فعالیت
                 تخصص‌ها
             </span>
             </small>


             <h2>
             <h2>
                 در چه زمینه‌هایی همراه شما هستم؟
                 حوزه‌های تخصصی
             </h2>
             </h2>
            <p>
                آموزش‌ها با تمرکز بر شناخت بهتر خود،
                افزایش آگاهی و ایجاد تغییرات پایدار طراحی شده‌اند.
            </p>


         </div>
         </div>




         <div class="services-grid">
         <div class="skills-grid">




             <article class="service-card">
             <div class="skill">


                 <div class="service-icon">
                 <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-17.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                    <i class="fa-solid fa-brain"></i>
                <div class="skill-title">


                </div>
                    <span>
                        خودشناسی
                    </span>


                <h3>
                    <span>
                     آموزش خودشناسی
                        95%
                 </h3>
                     </span>
 
                 </div>


                 <p>
                 <div class="skill-bar">
                    شناخت بهتر افکار، احساسات، ویژگی‌های فردی،
                    ارزش‌ها و الگوهای رفتاری.
                </p>


            </article>
                    <span style="--width:95%"></span>


                </div>


             <article class="service-card">
             </div>


                <div class="service-icon">


                    <i class="fa-solid fa-seedling"></i>
            <div class="skill">


                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-18.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                 </div>
                 </div>


                 <h3>
                 <div class="skill-title">
                    توسعه فردی
                </h3>


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


            </article>
                    <span>
                        90%
                    </span>


                </div>


            <article class="service-card">
                <div class="skill-bar">


                <div class="service-icon">
                    <span style="--width:90%"></span>


                    <i class="fa-solid fa-compass"></i>
                </div>


                </div>
            </div>


                <h3>
                    کشف مسیر شخصی
                </h3>


                <p>
            <div class="skill">
                    شناخت علایق، ارزش‌ها و توانمندی‌ها برای
                    انتخاب مسیر مناسب‌تر در زندگی.
                </p>


            </article>
                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-19.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                </div>


                <div class="skill-title">


            <article class="service-card">
                    <span>
                        آموزش و کارگاه
                    </span>


                <div class="service-icon">
                    <span>
 
                        92%
                     <i class="fa-solid fa-comments"></i>
                     </span>


                 </div>
                 </div>


                 <h3>
                 <div class="skill-bar">
                    کارگاه‌های آموزشی
                </h3>


                <p>
                    <span style="--width:92%"></span>
                    برگزاری دوره‌ها و کارگاه‌های کاربردی
                    در زمینه خودشناسی و رشد فردی.
                </p>


            </article>
                </div>


            </div>


            <article class="service-card">


                <div class="service-icon">
            <div class="skill">
 
                    <i class="fa-solid fa-lightbulb"></i>


                <div class="skill-image">
                    <img src="https://dl.faraghaib.ir/m/260021-01/260021-01-20.png"
                        alt="تصویر حوزه تخصصی خودشناسی"
                        loading="lazy">
                 </div>
                 </div>


                 <h3>
                 <div class="skill-title">
                    افزایش آگاهی
                </h3>


                <p>
                    <span>
                    شناخت الگوهای ذهنی و رفتاری و ایجاد
                        مهارت‌های فردی
                     نگاه آگاهانه‌تر به انتخاب‌های زندگی.
                     </span>
                </p>


            </article>
                    <span>
                        88%
                    </span>


                </div>


            <article class="service-card">
                <div class="skill-bar">


                <div class="service-icon">
                    <span style="--width:88%"></span>


                    <i class="fa-solid fa-heart"></i>
                </div>


                </div>
            </div>
 
                <h3>
                    رابطه بهتر با خود
                </h3>
 
                <p>
                    ایجاد ارتباط سالم‌تر با خود و شناخت
                    نیازها و خواسته‌های شخصی.
                </p>


            </article>


         </div>
         </div>
خط ۲٬۸۱۵: خط ۲٬۷۹۲:




<!-- ========================================================
<!-- =====================================================
     SKILLS
     SERVICES
========================================================= -->
===================================================== -->


<section class="skills">
<section class="section"
        id="services">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 تخصص‌ها
                 آموزش‌ها
             </span>
             </small>


             <h2>
             <h2>
                 حوزه‌های تخصصی
                 در چه زمینه‌هایی آموزش می‌دهم؟
             </h2>
             </h2>


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


خط ۲٬۸۴۰: خط ۲٬۸۱۹:




         <div class="skills-grid">
         <div class="cards-grid">




             <div class="skill">
             <article class="card">


                 <div class="skill-top">
                 <div class="card-icon">
                    <i class="fa-solid fa-brain"></i>
                </div>


                    <span>
                <h3>
                        خودشناسی
                    خودشناسی
                    </span>
                </h3>


                    <span>
                <p>
                        95%
                    شناخت ویژگی‌ها، افکار، احساسات،
                     </span>
                     ارزش‌ها و الگوهای رفتاری.
                </p>


                </div>
            </article>


                <div class="progress">
                    <span style="--value:95%"></span>
                </div>


             </div>
             <article class="card">


                <div class="card-icon">
                    <i class="fa-solid fa-seedling"></i>
                </div>


            <div class="skill">
                <h3>
                    رشد فردی
                </h3>


                 <div class="skill-top">
                 <p>
                    پیدا کردن موانع رشد و ایجاد تغییرات
                    مثبت و پایدار در زندگی.
                </p>


                    <span>
            </article>
                        توسعه فردی
                    </span>


                    <span>
                        92%
                    </span>


                </div>
            <article class="card">


                 <div class="progress">
                 <div class="card-icon">
                     <span style="--value:92%"></span>
                     <i class="fa-solid fa-compass"></i>
                 </div>
                 </div>


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


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


             <div class="skill">
             </article>


                <div class="skill-top">


                    <span>
            <article class="card">
                        آموزش و برگزاری کارگاه
                    </span>
 
                    <span>
                        90%
                    </span>


                <div class="card-icon">
                    <i class="fa-solid fa-lightbulb"></i>
                 </div>
                 </div>


                 <div class="progress">
                 <h3>
                     <span style="--value:90%"></span>
                     آگاهی فردی
                 </div>
                 </h3>


            </div>
                <p>
                    افزایش شناخت نسبت به انتخاب‌ها،
                    رفتارها و الگوهای ذهنی.
                </p>


            </article>


            <div class="skill">


                 <div class="skill-top">
            <article class="card">
 
                 <div class="card-icon">
                    <i class="fa-solid fa-comments"></i>
                </div>
 
                <h3>
                    کارگاه آموزشی
                </h3>
 
                <p>
                    برگزاری دوره‌ها و کارگاه‌های آموزشی
                    در زمینه خودشناسی و توسعه فردی.
                </p>
 
            </article>


                    <span>
                        مهارت‌های فردی
                    </span>


                    <span>
            <article class="card">
                        88%
                    </span>


                <div class="card-icon">
                    <i class="fa-solid fa-heart"></i>
                 </div>
                 </div>


                 <div class="progress">
                 <h3>
                     <span style="--value:88%"></span>
                     ارتباط با خود
                </div>
                </h3>
 
                <p>
                    ایجاد رابطه‌ای آگاهانه‌تر با خود،
                    نیازها و خواسته‌های شخصی.
                </p>
 
            </article>


            </div>


         </div>
         </div>
خط ۲٬۹۳۳: خط ۲٬۹۳۷:




<!-- ========================================================
<!-- =====================================================
     COURSES
     COURSES
========================================================= -->
===================================================== -->


<section class="courses"
<section class="section"
         id="courses">
         id="courses">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 دوره‌ها
                 دوره‌ها
             </span>
             </small>


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


         </div>
         </div>




         <div class="courses-grid">
         <div class="cards-grid">




             <article class="course-card">
             <article class="card course-card">


                 <div class="course-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-04.jpg"
                        alt="دوره مقدماتی خودشناسی"
                    alt="دوره خودشناسی"
                        loading="lazy">
                    loading="lazy">


                 </div>
                 </div>


                 <div class="course-body">
                 <div class="card-content">


                     <span class="course-tag">
                     <span class="card-tag">
                         مقدماتی
                         خودشناسی
                     </span>
                     </span>


خط ۲٬۹۸۵: خط ۲٬۹۸۴:


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


                    <div class="course-meta">
                 </div>
 
                        <span>
                            <i class="fa-regular fa-clock"></i>
                            8 جلسه
                        </span>
 
                        <span>
                            <i class="fa-solid fa-laptop"></i>
                            آنلاین
                        </span>
 
                    </div>
 
                 </div>


             </article>
             </article>




             <article class="course-card">
             <article class="card course-card">


                 <div class="course-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-05.jpg"
                        alt="دوره توسعه فردی"
                    alt="دوره توسعه فردی"
                        loading="lazy">
                    loading="lazy">


                 </div>
                 </div>


                 <div class="course-body">
                 <div class="card-content">


                     <span class="course-tag">
                     <span class="card-tag">
                         توسعه فردی
                         توسعه فردی
                     </span>
                     </span>


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


                     <p>
                     <p>
                         شناخت موانع رشد و ایجاد مسیر عملی برای
                         شناخت موانع رشد و ایجاد مسیر
                        پیشرفت و تغییرات فردی.
                        عملی برای پیشرفت شخصی.
                     </p>
                     </p>
                    <div class="course-meta">
                        <span>
                            <i class="fa-regular fa-clock"></i>
                            10 جلسه
                        </span>
                        <span>
                            <i class="fa-solid fa-users"></i>
                            گروهی
                        </span>
                    </div>


                 </div>
                 </div>
خط ۳٬۰۵۳: خط ۳٬۰۲۴:




             <article class="course-card">
             <article class="card course-card">


                 <div class="course-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-06.jpg"
                        alt="کارگاه آگاهی و خودشناسی"
                    alt="کارگاه خودشناسی"
                        loading="lazy">
                    loading="lazy">


                 </div>
                 </div>


                 <div class="course-body">
                 <div class="card-content">


                     <span class="course-tag">
                     <span class="card-tag">
                         کارگاه
                         کارگاه
                     </span>
                     </span>


                     <h3>
                     <h3>
                         آگاهی و انتخاب آگاهانه
                         آگاهی و انتخاب
                     </h3>
                     </h3>


                     <p>
                     <p>
                         بررسی الگوهای ذهنی و رفتاری برای
                         بررسی الگوهای ذهنی و رفتاری
                         تصمیم‌گیری بهتر و زندگی آگاهانه‌تر.
                         برای انتخاب‌های آگاهانه‌تر.
                     </p>
                     </p>


                    <div class="course-meta">
                </div>


                        <span>
            </article>
                            <i class="fa-regular fa-clock"></i>
                            4 جلسه
                        </span>


                        <span>
                            <i class="fa-solid fa-location-dot"></i>
                            حضوری
                        </span>


                    </div>
            <article class="card course-card">


                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-07.jpg"
                    alt="دوره مهارت‌های فردی"
                    loading="lazy">
                 </div>
                 </div>


            </article>
                <div class="card-content">
                    <span class="card-tag">مهارت فردی</span>


        </div>
                    <h3>تقویت مهارت‌های فردی</h3>


     </div>
                    <p>
                        تمرین مهارت‌های کاربردی برای
                        ارتباط بهتر با خود و دیگران.
                    </p>
                </div>
 
            </article>
 
            <article class="card course-card">
 
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-08.jpg"
                    alt="دوره آگاهی فردی"
                    loading="lazy">
                </div>
 
                <div class="card-content">
                    <span class="card-tag">آگاهی</span>
 
                    <h3>افزایش آگاهی فردی</h3>
 
                    <p>
                        شناخت الگوهای ذهنی و ایجاد
                        انتخاب‌های آگاهانه‌تر در زندگی.
                    </p>
                </div>
 
            </article>
 
            <article class="card course-card">
 
                <div class="card-image">
                    <img
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-09.jpg"
                    alt="کارگاه رشد فردی"
                    loading="lazy">
                </div>
 
                <div class="card-content">
                    <span class="card-tag">رشد فردی</span>
 
                    <h3>کارگاه مسیر رشد</h3>
 
                    <p>
                        بررسی موانع رشد و ساختن مسیر
                        عملی برای پیشرفت شخصی.
                    </p>
                </div>
 
            </article>
 
 
        </div>
 
     </div>


</section>
</section>




<!-- ========================================================
<!-- =====================================================
     EXPERIENCE
     EXPERIENCE
========================================================= -->
===================================================== -->


<section class="experience"
<section class="section"
         id="experience">
         id="experience">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 سوابق فعالیت
                 سوابق
             </span>
             </small>


             <h2>
             <h2>
                 مسیر حرفه‌ای من
                 مسیر حرفه‌ای
             </h2>
             </h2>


خط ۳٬۱۳۰: خط ۳٬۱۵۵:


             <div class="timeline-item">
             <div class="timeline-item">
                <span class="timeline-dot"></span>


                 <span class="timeline-year">
                 <span class="timeline-year">
خط ۳٬۱۴۳: خط ۳٬۱۶۶:
                 <p>
                 <p>
                     برگزاری دوره‌ها و کارگاه‌های آموزشی
                     برگزاری دوره‌ها و کارگاه‌های آموزشی
                     با تمرکز بر خودشناسی، آگاهی و رشد فردی.
                     در زمینه خودشناسی و رشد فردی.
                 </p>
                 </p>


خط ۳٬۱۵۰: خط ۳٬۱۷۳:


             <div class="timeline-item">
             <div class="timeline-item">
                <span class="timeline-dot"></span>


                 <span class="timeline-year">
                 <span class="timeline-year">
خط ۳٬۱۵۸: خط ۳٬۱۷۹:


                 <h3>
                 <h3>
                     برگزاری کارگاه‌های آموزشی
                     مدرس و برگزارکننده کارگاه
                 </h3>
                 </h3>


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


خط ۳٬۱۷۰: خط ۳٬۱۹۱:


             <div class="timeline-item">
             <div class="timeline-item">
                <span class="timeline-dot"></span>


                 <span class="timeline-year">
                 <span class="timeline-year">
خط ۳٬۱۸۲: خط ۳٬۲۰۱:


                 <p>
                 <p>
                     آغاز فعالیت حرفه‌ای در حوزه آموزش،
                     آغاز فعالیت تخصصی در زمینه آموزش،
                     مطالعه و توسعه فردی.
                     مطالعه و توسعه فردی.
                 </p>
                 </p>


             </div>
             </div>


         </div>
         </div>
خط ۳٬۱۹۵: خط ۳٬۲۱۵:




<!-- ========================================================
<!-- =====================================================
     TESTIMONIALS
     TESTIMONIALS
========================================================= -->
===================================================== -->


<section class="testimonials">
<section class="section"
        id="testimonials">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 تجربه همراهان
                 نظرات
             </span>
             </small>


             <h2>
             <h2>
                 نظر شرکت‌کنندگان دوره‌ها
                 تجربه همراهان
             </h2>
             </h2>


خط ۳٬۲۱۶: خط ۳٬۲۳۷:




         <div class="testimonials-grid">
         <div class="cards-grid">




             <article class="testimonial">
             <article class="card testimonial">


                 <div class="stars">
                 <div class="quote">
                     ★★★★★
                     <i class="fa-solid fa-quote-right"></i>
                 </div>
                 </div>


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


                 <div class="person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر خانم">
                        src="https://i.pravatar.cc/100?img=32"
                         <i class="fa-solid fa-person-dress"></i>
                        alt="شرکت کننده دوره"
                    </div>
                         loading="lazy">


                     <div>
                     <div>
خط ۳٬۲۵۴: خط ۳٬۲۷۴:




             <article class="testimonial">
             <article class="card testimonial">


                 <div class="stars">
                 <div class="quote">
                     ★★★★★
                     <i class="fa-solid fa-quote-right"></i>
                 </div>
                 </div>


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


                 <div class="person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر آقا">
                        src="https://i.pravatar.cc/100?img=12"
                         <i class="fa-solid fa-person"></i>
                        alt="شرکت کننده کارگاه"
                    </div>
                         loading="lazy">


                     <div>
                     <div>
خط ۳٬۲۹۰: خط ۳٬۳۰۸:




             <article class="testimonial">
             <article class="card testimonial">


                 <div class="stars">
                 <div class="quote">
                     ★★★★★
                     <i class="fa-solid fa-quote-right"></i>
                 </div>
                 </div>


                 <p>
                 <p>
                     فضای آموزشی صمیمی و محتوای دوره کمک کرد
                     فضای آموزشی خوب و محتوای دوره باعث شد
                     بعضی از الگوهای فکری خودم را بهتر ببینم.
                     بعضی از الگوهای رفتاری خودم را بهتر ببینم.
                 </p>
                 </p>


                 <div class="person">
                 <div class="testimonial-person">


                     <img
                     <div class="testimonial-avatar" aria-label="کارکتر خانم">
                        src="https://i.pravatar.cc/100?img=47"
                         <i class="fa-solid fa-person-dress"></i>
                        alt="شرکت کننده دوره"
                    </div>
                         loading="lazy">


                     <div>
                     <div>
خط ۳٬۳۲۳: خط ۳٬۳۴۰:


             </article>
             </article>


         </div>
         </div>
خط ۳٬۳۳۱: خط ۳٬۳۴۹:




<!-- ========================================================
<!-- =====================================================
     BLOG
     BLOG
========================================================= -->
===================================================== -->


<section class="blog"
<section class="section"
         id="blog">
         id="blog">


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 مجله خودشناسی
                 مجله خودشناسی
             </span>
             </small>


             <h2>
             <h2>
                 مقالات و مطالب آموزشی
                 مقالات و مطالب آموزشی
             </h2>
             </h2>
            <p>
                مطالبی درباره خودشناسی، رشد فردی و آگاهی بیشتر.
            </p>


         </div>
         </div>




         <div class="blog-grid">
         <div class="cards-grid">




             <article class="blog-card">
             <article class="card blog-card">


                 <div class="blog-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-02.jpg"
                        alt="خودشناسی چیست"
                    alt="خودشناسی چیست">
                        loading="lazy">


                 </div>
                 </div>


                 <div class="blog-body">
                 <div class="card-content">


                     <span class="blog-date">
                     <span class="blog-date">
خط ۳٬۳۷۸: خط ۳٬۳۹۱:


                     <h3>
                     <h3>
                         خودشناسی چیست و چرا اهمیت دارد؟
                         خودشناسی چیست؟
                     </h3>
                     </h3>


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


خط ۳٬۳۹۱: خط ۳٬۴۰۴:




             <article class="blog-card">
             <article class="card blog-card">


                 <div class="blog-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-10.jpg"
                        alt="رشد فردی"
                    alt="رشد فردی">
                        loading="lazy">


                 </div>
                 </div>


                 <div class="blog-body">
                 <div class="card-content">


                     <span class="blog-date">
                     <span class="blog-date">
خط ۳٬۴۰۹: خط ۳٬۴۲۱:


                     <h3>
                     <h3>
                         چگونه مسیر رشد فردی خود را پیدا کنیم؟
                         مسیر رشد فردی را چگونه پیدا کنیم؟
                     </h3>
                     </h3>


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


خط ۳٬۴۲۲: خط ۳٬۴۳۴:




             <article class="blog-card">
             <article class="card blog-card">


                 <div class="blog-image">
                 <div class="card-image">


                     <img
                     <img
                        src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=1000&q=85"
                    src="https://dl.faraghaib.ir/m/260021-01/260021-01-01.jpg"
                        alt="تصمیم گیری آگاهانه"
                    alt="انتخاب آگاهانه">
                        loading="lazy">


                 </div>
                 </div>


                 <div class="blog-body">
                 <div class="card-content">


                     <span class="blog-date">
                     <span class="blog-date">
خط ۳٬۴۴۰: خط ۳٬۴۵۱:


                     <h3>
                     <h3>
                         تصمیم‌های آگاهانه چگونه شکل می‌گیرند؟
                         انتخاب آگاهانه چگونه شکل می‌گیرد؟
                     </h3>
                     </h3>


                     <p>
                     <p>
                         شناخت عوامل مؤثر بر تصمیم‌گیری و نقش
                         نقش آگاهی در تصمیم‌های مهم
                         آگاهی در انتخاب‌های مهم زندگی.
                         و انتخاب‌های زندگی.
                     </p>
                     </p>


خط ۳٬۴۵۱: خط ۳٬۴۶۲:


             </article>
             </article>


         </div>
         </div>
خط ۳٬۴۵۹: خط ۳٬۴۷۱:




<!-- ========================================================
<!-- =====================================================
     CTA
     CTA
========================================================= -->
===================================================== -->


<section class="cta">
<section class="section cta">


     <div class="container">
     <div class="container">


         <div class="cta-box">
         <div class="cta-inner">


             <h2>
             <h2>
                 آماده‌ای خودت را بهتر بشناسی؟
                 مسیر شناخت خود را شروع کنید
             </h2>
             </h2>


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


             <a href="#contact"
             <a href="#contact"
               class="btn btn-accent">
               class="btn btn-gold">


                 <i class="fa-solid fa-arrow-left"></i>
                 <i class="fa-solid fa-arrow-left"></i>


                 شروع ارتباط
                 ارتباط با من


             </a>
             </a>
خط ۳٬۴۹۴: خط ۳٬۵۰۷:




<!-- ========================================================
<!-- =====================================================
     CONTACT
     CONTACT
========================================================= -->
===================================================== -->


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


     <div class="container">
     <div class="container">


         <div class="section-heading">
         <div class="section-title">


             <span class="eyebrow">
             <small>
                 ارتباط با من
                 ارتباط
             </span>
             </small>


             <h2>
             <h2>
                 برای شروع گفت‌وگو آماده‌ام
                 با من در ارتباط باشید
             </h2>
             </h2>
            <p>
                برای دریافت اطلاعات دوره‌ها، کارگاه‌ها
                و همکاری می‌توانید با من در ارتباط باشید.
            </p>


         </div>
         </div>
خط ۳٬۵۲۴: خط ۳٬۵۳۲:




             <div class="contact-info">
             <div class="contact-list">




                 <div class="contact-card">
                 <div class="contact-item">


                     <div class="contact-icon">
                     <div class="contact-icon">
                         <i class="fa-solid fa-phone"></i>
                         <i class="fa-solid fa-phone"></i>
                     </div>
                     </div>


خط ۳٬۵۳۸: خط ۳٬۵۴۴:


                         <small>
                         <small>
                             تلفن
                             شماره تماس
                         </small>
                         </small>


خط ۳٬۵۵۰: خط ۳٬۵۵۶:




                 <div class="contact-card">
                 <div class="contact-item">


                     <div class="contact-icon">
                     <div class="contact-icon">
                         <i class="fa-regular fa-envelope"></i>
                         <i class="fa-regular fa-envelope"></i>
                     </div>
                     </div>


خط ۳٬۵۷۳: خط ۳٬۵۷۷:




                 <div class="contact-card">
                 <div class="contact-item">


                     <div class="contact-icon">
                     <div class="contact-icon">
                         <i class="fa-brands fa-instagram"></i>
                         <i class="fa-brands fa-instagram"></i>
                     </div>
                     </div>


خط ۳٬۵۹۶: خط ۳٬۵۹۸:




                <div class="contact-card">
            </div>


                    <div class="contact-icon">


                        <i class="fa-solid fa-location-dot"></i>
            <form class="contact-form">


                    </div>
                <div class="form-grid">


                    <div>


                        <small>
                    <div class="form-group">
                            محل فعالیت
                        </small>


                        <strong>
                         <label>
                            ایران
                        </strong>
 
                    </div>
 
                </div>
 
            </div>
 
 
            <form class="contact-form">
 
                <div class="form-grid">
 
 
                    <div class="form-group">
 
                         <label for="name">
                             نام و نام خانوادگی
                             نام و نام خانوادگی
                         </label>
                         </label>


                         <input
                         <input
                            id="name"
                        type="text"
                            type="text"
                        placeholder="نام شما">
                            placeholder="نام خود را وارد کنید"
                            autocomplete="name">


                     </div>
                     </div>
خط ۳٬۶۴۳: خط ۳٬۶۲۱:
                     <div class="form-group">
                     <div class="form-group">


                         <label for="phone">
                         <label>
                             شماره تماس
                             شماره تماس
                         </label>
                         </label>


                         <input
                         <input
                            id="phone"
                        type="tel"
                            type="tel"
                        placeholder="۰۹xxxxxxxxx">
                            placeholder="۰۹xxxxxxxxx"
                            autocomplete="tel">


                     </div>
                     </div>
خط ۳٬۶۵۸: خط ۳٬۶۳۴:
                     <div class="form-group full">
                     <div class="form-group full">


                         <label for="subject">
                         <label>
                             موضوع
                             موضوع
                         </label>
                         </label>


                         <input
                         <input
                            id="subject"
                        type="text"
                            type="text"
                        placeholder="موضوع پیام">
                            placeholder="موضوع پیام">


                     </div>
                     </div>
خط ۳٬۶۷۲: خط ۳٬۶۴۷:
                     <div class="form-group full">
                     <div class="form-group full">


                         <label for="message">
                         <label>
                             پیام
                             پیام
                         </label>
                         </label>


                         <textarea
                         <textarea
                            id="message"
                        placeholder="پیام خود را بنویسید..."></textarea>
                            placeholder="پیام خود را بنویسید..."></textarea>


                     </div>
                     </div>
خط ۳٬۶۸۶: خط ۳٬۶۶۰:


                         <button
                         <button
                            type="submit"
                        type="submit"
                            class="btn btn-primary">
                        class="btn btn-gold">


                             <i class="fa-regular fa-paper-plane"></i>
                             <i class="fa-regular fa-paper-plane"></i>
خط ۳٬۶۹۶: خط ۳٬۶۷۰:


                     </div>
                     </div>


                 </div>
                 </div>


             </form>
             </form>


         </div>
         </div>
خط ۳٬۷۰۷: خط ۳٬۶۸۳:
</section>
</section>


</main>


 
<!-- =====================================================
<!-- ========================================================
     FOOTER
     FOOTER
========================================================= -->
===================================================== -->


<footer class="footer">
<footer class="footer">
خط ۳٬۷۱۸: خط ۳٬۶۹۲:
     <div class="container">
     <div class="container">


         <div class="footer-grid">
         <p>


            © تمامی حقوق برای


             <div>
             <strong>
                محمدرضا شایق
            </strong>


                <div class="footer-logo">
            محفوظ است.


                    <span class="logo-mark">
        </p>


                        <i class="fa-solid fa-user"></i>
    </div>


                    </span>
</footer>


                    محمدرضا شایق


                </div>
</main>


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


                <div class="socials">


                    <a href="#"
<!-- =====================================================
                      aria-label="Instagram">
    SECTION LOCK SYSTEM
===================================================== -->


                        <i class="fa-brands fa-instagram"></i>
<script>


                    </a>
document.addEventListener(
    "DOMContentLoaded",
    function(){


                    <a href="#"
        const menuLinks =
                      aria-label="Telegram">
            document.querySelectorAll(
                ".sidebar-menu a"
            );


                        <i class="fa-brands fa-telegram"></i>
        const sections =
            document.querySelectorAll(
                "main section[id]"
            );
 
        let lockedSection = null;


                    </a>
        let isHome = true;


                    <a href="#"
                      aria-label="WhatsApp">


                        <i class="fa-brands fa-whatsapp"></i>
        /* -------------------------------------------------
          CLICK MENU
        ------------------------------------------------- */


                    </a>
        menuLinks.forEach(
            link => {


                 </div>
                 link.addEventListener(
                    "click",
                    function(event){


            </div>
                        event.preventDefault();


                        const targetId =
                            this.getAttribute("href");


            <div>
                        const target =
                            document.querySelector(
                                targetId
                            );


                <h3>
                        if(!target) return;
                    دسترسی سریع
                </h3>


                <ul class="footer-links">


                    <li>
                         /* Active */
                         <a href="#about">
                            درباره من
                        </a>
                    </li>


                    <li>
                         menuLinks.forEach(
                         <a href="#services">
                             item => {
                             حوزه فعالیت
                        </a>
                    </li>


                    <li>
                                item.classList.remove(
                        <a href="#courses">
                                    "active"
                            دوره‌ها
                                );
                        </a>
                    </li>


                    <li>
                             }
                        <a href="#blog">
                         );
                             مقالات
                         </a>
                    </li>


                </ul>
                        this.classList.add(
                            "active"
                        );


            </div>


                        /* HOME */


            <div>
                        if(targetId === "#home"){


                <h3>
                            lockedSection = null;
                    ارتباط
                </h3>


                <ul class="footer-links">
                            isHome = true;


                    <li>
                            document.body.classList.remove(
                        <a href="#contact">
                                "section-locked"
                             تماس با من
                             );
                        </a>
                    </li>


                    <li>
                            window.scrollTo({
                        <a href="#">
                                top:0,
                             حریم خصوصی
                                behavior:"smooth"
                        </a>
                             });
                    </li>


                    <li>
                             return;
                        <a href="#">
                             قوانین سایت
                        </a>
                    </li>


                </ul>
                        }


            </div>


        </div>
                        /* OTHER SECTIONS */


                        isHome = false;


        <div class="footer-bottom">
                        lockedSection = target;


            © تمامی حقوق برای
                        document.body.classList.add(
            <strong>
                            "section-locked"
                محمدرضا شایق
                        );
            </strong>
            محفوظ است.


        </div>


    </div>
                        target.scrollIntoView({
                            behavior:"smooth",
                            block:"start"
                        });


</footer>
                    }
                );


            }
        );


<!-- ========================================================
    MOBILE BOTTOM NAV
========================================================= -->


<nav class="mobile-bottom-nav"
        /* -------------------------------------------------
    aria-label="منوی موبایل">
          BLOCK MOUSE WHEEL
        ------------------------------------------------- */


    <a href="#home"
        window.addEventListener(
      class="active">
            "wheel",
            function(event){


        <i class="fa-solid fa-house"></i>
                if(
                    !isHome &&
                    lockedSection
                ){


        <span>
                    event.preventDefault();
            خانه
        </span>


    </a>
                }


            },
            {
                passive:false
            }
        );


    <a href="#about">


         <i class="fa-solid fa-user"></i>
         /* -------------------------------------------------
          BLOCK TOUCH SCROLL
        ------------------------------------------------- */


         <span>
         window.addEventListener(
             درباره من
             "touchmove",
        </span>
            function(event){


    </a>
                if(
                    !isHome &&
                    lockedSection
                ){


                    event.preventDefault();


    <a href="#courses">
                }


         <i class="fa-solid fa-graduation-cap"></i>
            },
            {
                passive:false
            }
         );


        <span>
/*
            دوره‌ها
         /* -------------------------------------------------
         </span>
          BLOCK KEYBOARD SCROLL
 
        ------------------------------------------------- */
    </a>


        window.addEventListener(
            "keydown",
            function(event){


    <a href="#blog">
                if(
                    !isHome &&
                    lockedSection
                ){


        <i class="fa-solid fa-book-open"></i>
                    const blockedKeys = [


        <span>
                        "ArrowUp",
            مقالات
                        "ArrowDown",
        </span>
                        "PageUp",
                        "PageDown",
                        "Home",
                        "End",
                        " ",
                        "Spacebar"


    </a>
                    ];
 
 
    <a href="#contact">
 
        <i class="fa-solid fa-phone"></i>
 
        <span>
            تماس
        </span>
 
    </a>
 
</nav>
 
 
<!-- ========================================================
    ACTIVE MOBILE MENU
========================================================= -->
 
<script>
 
document.addEventListener(
    "DOMContentLoaded",
    function(){
 
        const sections =
            document.querySelectorAll(
                "section[id]"
            );
 
        const navLinks =
            document.querySelectorAll(
                ".mobile-bottom-nav a"
            );
 
        function setActive(){
 
            let current = "";
 
            sections.forEach(
                section => {
 
                    const top =
                        section.offsetTop - 180;


                     if(
                     if(
                         window.scrollY >= top
                         blockedKeys.includes(
                            event.key
                        )
                     ){
                     ){


                         current =
                         event.preventDefault();
                            section.getAttribute("id");


                     }
                     }


                 }
                 }
            );


             navLinks.forEach(
             }
                link => {
        );
*/
 
      /* -------------------------------------------------
          CLICKING HOME BUTTON INSIDE PAGE
        ------------------------------------------------- */
 
        document.querySelectorAll(
            'a[href="#home"]'
        ).forEach(
            link => {
 
                link.addEventListener(
                    "click",
                    function(){


                    link.classList.remove(
                         lockedSection = null;
                         "active"
                    );


                    if(
                         isHome = true;
                         link.getAttribute("href") ===
                        "#" + current
                    ){


                         link.classList.add(
                         document.body.classList.remove(
                             "active"
                             "section-locked"
                         );
                         );


                     }
                     }
                );
            }
        );


                }
            );


         }
         /* -------------------------------------------------
          INITIAL STATE
        ------------------------------------------------- */


         window.addEventListener(
         document.body.classList.remove(
             "scroll",
             "section-locked"
            setActive,
            {passive:true}
         );
         );
        setActive();


     }
     }
خط ۳٬۹۹۸: خط ۳٬۹۵۸:


</body>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/تست»