.elementor-16363 .elementor-element.elementor-element-42e1344{text-align:center;}.elementor-16363 .elementor-element.elementor-element-42e1344 .elementor-heading-title{color:#5836E6;}.elementor-bc-flex-widget .elementor-16363 .elementor-element.elementor-element-001f398.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-16363 .elementor-element.elementor-element-001f398.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-16363 .elementor-element.elementor-element-001f398.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-df5c83e .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 38px 24px 38px;}.elementor-16363 .elementor-element.elementor-element-8b4217b .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 38px 24px 38px;}.elementor-16363 .elementor-element.elementor-element-4c5a729 .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 38px 24px 38px;}.elementor-16363 .elementor-element.elementor-element-6c9d57d .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 10px 24px 10px;}.elementor-16363 .elementor-element.elementor-element-b75626f .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 10px 24px 10px;}.elementor-16363 .elementor-element.elementor-element-9442586 .elementor-button{background-color:#FFFFFF;font-size:20px;font-weight:900;fill:#5836E6;color:#5836E6;border-style:solid;border-radius:0px 0px 0px 0px;padding:24px 40px 24px 40px;}.elementor-16363 .elementor-element.elementor-element-8973112{text-align:center;}.elementor-16363 .elementor-element.elementor-element-8973112 .elementor-heading-title{color:#5836E6;}.elementor-bc-flex-widget .elementor-16363 .elementor-element.elementor-element-a5ed0be.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-16363 .elementor-element.elementor-element-a5ed0be.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-16363 .elementor-element.elementor-element-a5ed0be.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-ae25194 > .elementor-widget-container{padding:0px 130px 0px 130px;}.elementor-16363 .elementor-element.elementor-element-ae25194{font-size:20px;font-weight:900;color:#5836E6;}.elementor-bc-flex-widget .elementor-16363 .elementor-element.elementor-element-0f915b5.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-16363 .elementor-element.elementor-element-0f915b5.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-16363 .elementor-element.elementor-element-0f915b5.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-2365fda > .elementor-widget-container{padding:0px 130px 0px 130px;}.elementor-16363 .elementor-element.elementor-element-2365fda{font-size:20px;font-weight:900;color:#5836E6;}.elementor-16363 .elementor-element.elementor-element-baed8dd.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-66c2763{width:var( --container-widget-width, 89.516% );max-width:89.516%;--container-widget-width:89.516%;--container-widget-flex-grow:0;}.elementor-16363 .elementor-element.elementor-element-6e6dd73.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-5793570{width:var( --container-widget-width, 89.516% );max-width:89.516%;--container-widget-width:89.516%;--container-widget-flex-grow:0;}.elementor-16363 .elementor-element.elementor-element-75ec34e.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-d7123b5{width:var( --container-widget-width, 89.516% );max-width:89.516%;--container-widget-width:89.516%;--container-widget-flex-grow:0;}.elementor-16363 .elementor-element.elementor-element-1394c1f.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-16363 .elementor-element.elementor-element-3d7d978{width:var( --container-widget-width, 89.516% );max-width:89.516%;--container-widget-width:89.516%;--container-widget-flex-grow:0;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-16363 .elementor-element.elementor-element-2365fda > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-16363 .elementor-element.elementor-element-2365fda{font-size:16px;}}@media(min-width:768px){.elementor-16363 .elementor-element.elementor-element-6f5721c{width:14.88%;}.elementor-16363 .elementor-element.elementor-element-b7246e1{width:16.085%;}.elementor-16363 .elementor-element.elementor-element-a9b8c50{width:16.68%;}.elementor-16363 .elementor-element.elementor-element-cd6d78b{width:16.979%;}}/* Start custom CSS for html, class: .elementor-element-3e885c5 */.limited-search-box {
    display: flex;
    align-items: center;
    max-width: 420px;
    width: 100%;
    background: #ffffff;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(88, 54, 230, 0.25);
    border: 2px solid #5836E6;
    margin: 0 auto; /* وسط‌چین کل باکس */
}

/* ورودی جستجو */
.limited-search-box input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 12px 14px;
    color: #1f2937;
    background: transparent;
    font-family: inherit;
}

/* دکمه جستجو */
.limited-search-box button {
    display: flex;                /* حالت فلکس برای سنتر */
    justify-content: center;      /* وسط افقی */
    align-items: center;          /* وسط عمودی */
    background: #8e5be8;          /* بنفش اصلی */
    color: #ffffff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/* افکت هاور */
.limited-search-box button:hover {
    background: #6d3fd6;          /* بنفش تیره‌تر (هم‌خانواده) */
    transform: scale(1.05);
}

/* فوکوس حرفه‌ای */
.limited-search-box:focus-within {
    box-shadow: 0 16px 40px rgba(142, 91, 232, 0.45);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fc669ca *//* ===============================
       RESPONSIVE SKILL GRID (No Change)
================================ */

.skill-grid{
    display: grid;
    gap: 18px;
    padding: 20px;

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

/* Tablet */
@media (min-width: 640px){
    .skill-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px){
    .skill-grid{
        grid-template-columns: repeat(6, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* -------------------------------
       SKILL BUTTON CARD (No Change)
-------------------------------- */

.skill-btn{
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    text-decoration: none;

    font-weight: 600;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    transition: transform .35s ease, box-shadow .35s ease;
}

/* آیکن */
.skill-btn .icon{
    font-size: 30px;
    margin-bottom: 10px;
}

/* عنوان */
.skill-btn .title{
    font-size: 15px;
    letter-spacing: .4px;
}

/* Hover دسکتاپ */
@media (hover:hover){
    .skill-btn:hover{
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
}

/* Active موبایل */
.skill-btn:active{
    transform: scale(.96);
}

/* -------------------------------
      PURPLE FLOW - DARKEST & RICHEST
      Right (Darkest) ➜ Left (Lightest)
-------------------------------- */

/* 6️⃣ Figma – بنفش سلطنتی تیره (سمت راست) */
.skill-btn.figma{
    background: linear-gradient(135deg, #2e043b, #4c1d95);
    color: #fff;
}

/* 5️⃣ JavaScript – بنفش بسیار عمیق */
.skill-btn.js{
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fff;
}

/* 4️⃣ CSS – بنفش اشباع اصلی */
.skill-btn.css{
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    color: #fff;
}

/* 3️⃣ HTML – بنفش متوسط رو به تیره */
.skill-btn.html{
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
}

/* 2️⃣ Frontend – بنفش مایل به صورتی روشن‌تر (باید سفید بماند) */
.skill-btn.frontend{
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: #2e1065; /* متن تیره برای کنتراست */
}

/* 1️⃣ UI/UX – روشن‌ترین اما هنوز بنفش قوی */
.skill-btn.uiux{
    background: linear-gradient(135deg, #c084fc, #ddd6fe);
    color: #2e1065;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a91b92e *//* ===============================
       RESPONSIVE SKILL GRID (No Change)
================================ */

.skill-grid{
    display: grid;
    gap: 18px;
    padding: 20px;

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

/* Tablet */
@media (min-width: 640px){
    .skill-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop */
@media (min-width: 1024px){
    .skill-grid{
        grid-template-columns: repeat(6, 1fr);
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* -------------------------------
       SKILL BUTTON CARD (No Change)
-------------------------------- */

.skill-btn{
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    text-decoration: none;

    font-weight: 600;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    transition: transform .35s ease, box-shadow .35s ease;
}

/* آیکن */
.skill-btn .icon{
    font-size: 30px;
    margin-bottom: 10px;
}

/* عنوان */
.skill-btn .title{
    font-size: 15px;
    letter-spacing: .4px;
}

/* Hover دسکتاپ */
@media (hover:hover){
    .skill-btn:hover{
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }
}

/* Active موبایل */
.skill-btn:active{
    transform: scale(.96);
}

/* -------------------------------
      PURPLE FLOW - DARKEST & RICHEST
      Right (Darkest) ➜ Left (Lightest)
-------------------------------- */

/* 6️⃣ Figma – بنفش سلطنتی تیره (سمت راست) */
.skill-btn.figma{
    background: linear-gradient(135deg, #2e043b, #4c1d95);
    color: #fff;
}

/* 5️⃣ JavaScript – بنفش بسیار عمیق */
.skill-btn.js{
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fff;
}

/* 4️⃣ CSS – بنفش اشباع اصلی */
.skill-btn.css{
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
    color: #fff;
}

/* 3️⃣ HTML – بنفش متوسط رو به تیره */
.skill-btn.html{
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
}

/* 2️⃣ Frontend – بنفش مایل به صورتی روشن‌تر (باید سفید بماند) */
.skill-btn.frontend{
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: #2e1065; /* متن تیره برای کنتراست */
}

/* 1️⃣ UI/UX – روشن‌ترین اما هنوز بنفش قوی */
.skill-btn.uiux{
    background: linear-gradient(135deg, #c084fc, #ddd6fe);
    color: #2e1065;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c5d6436 *//* ===============================
   MOBILE SKILL BUTTON GRID – Centered Version
================================ */

.mobile-skill-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px;
    justify-items: center;   /* وسط‌چین افقی کارت‌ها */
    align-items: center;     /* وسط‌چین عمودی کارت‌ها (اختیاری ولی قشنگ‌ترش می‌کنه) */
}

/* کارت دکمه (تنظیمات پایه ثابت) */
.skill-btn{
    position: relative;
    height: 120px;     /* ارتفاع ثابت */
    width: 100%;       /* کارت تمام عرض ستون رو بگیره */
    max-width: 180px;  /* ولی بیش از حد کش نیاد روی گوشی‌های بزرگ‌تر */
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* آیکن */
.skill-btn .icon{
    font-size: 28px;
    margin-bottom: 8px;
}

/* عنوان */
.skill-btn .title{
    font-size: 14px;
    letter-spacing: .3px;
}

/* افکت لمس */
.skill-btn:active{
    transform: scale(.96);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}


/* ---------------------------------
   طیف بنفش تیره و اشباع بالا
---------------------------------- */

.skill-btn.figma{
    background: linear-gradient(135deg, #2e043b, #4c1d95);
    color: #fff;
}

.skill-btn.js{
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fff;
}

.skill-btn.css{
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
}

.skill-btn.html{
    background: linear-gradient(135deg, #8b5cf6, #9d59d0);
    color: #fff;
}

.skill-btn.frontend{
    background: linear-gradient(135deg, #9d59d0, #c084fc);
    color: #2e1065;
}

.skill-btn.uiux{
    background: linear-gradient(135deg, #c084fc, #e0c3fc);
    color: #2e1065;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-66c2763 *//* ===============================
   PORTFOLIO CARD
================================ */

.portfolio-card{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    color:inherit;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.25s ease;
}

.portfolio-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* ---------- قسمت بالایی کارت ---------- */

.portfolio-thumb{
    height:150px;
    background:#e5e7eb;

    display:flex;
    align-items:center;
    justify-content:center;
}

.portfolio-thumb img{
    width:72px;
    height:72px;
    object-fit:contain;
    opacity:.9;
}

/* ---------- بدنه کارت ---------- */

.portfolio-body{
    padding:16px;
    position:relative;
}

.portfolio-title{
    margin:0 0 8px;
    font-size:15px;
    font-weight:800;
    color:#0f172a;
}

.portfolio-desc{
    margin:0;
    font-size:13px;
    line-height:1.8;
    color:#475569;
}

/* ---------- Badge ---------- */

.portfolio-badge{
    position:absolute;
    left:12px;
    bottom:12px;
    font-size:11px;
    font-weight:800;
    background:#f1f5f9;
    color:#0f172a;
    padding:4px 10px;
    border-radius:999px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8cd3cdd */.instructor-box{
    max-width:680px;
    margin:40px auto;
    padding:20px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    direction:rtl;
}

/* محتوای سمت چپ */
.instructor-content{
    flex:1;
}

.instructor-title{
    font-size:18px;
    font-weight:800;
    margin:0 0 8px;
    color:#1e3a8a;
}

.instructor-name{
    font-size:15px;
    font-weight:700;
    margin:0 0 10px;
    color:#0f172a;
}

.instructor-desc{
    font-size:13px;
    line-height:1.9;
    margin:0;
    color:#475569;
}

/* تصویر مدرس */
.instructor-avatar{
    width:110px;
    height:110px;
    border-radius:12px;
    background:#f1f5f9;
    border:1px solid #e5e7eb;
    flex-shrink:0;
}/* End custom CSS */