.elementor-146 .elementor-element.elementor-element-29e25b1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-146 .elementor-element.elementor-element-1365979{--spacer-size:50px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-146 .elementor-element.elementor-element-bb323e6.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-146 .elementor-element.elementor-element-bb323e6{text-align:center;}.elementor-146 .elementor-element.elementor-element-bb323e6 .elementor-heading-title{font-family:"Titillium Web", Sans-serif;font-size:35px;font-weight:600;color:#000000;}.elementor-146 .elementor-element.elementor-element-85e8465{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-146 .elementor-element.elementor-element-bb323e6 .elementor-heading-title{font-size:22px;}}@media(max-width:767px){.elementor-146 .elementor-element.elementor-element-bb323e6{width:var( --container-widget-width, 323px );max-width:323px;--container-widget-width:323px;--container-widget-flex-grow:0;}.elementor-146 .elementor-element.elementor-element-bb323e6 .elementor-heading-title{font-size:18px;}}/* Start custom CSS for shortcode, class: .elementor-element-98eadbe *//* ====================================================== */
/* == استایل جدید و حرفه‌ای برای بخش دسته‌بندی دوره‌ها == */
/* ====================================================== */

/* 1. کانتینر اصلی بخش */
.lp-cat-section {
    text-align: center;
    margin-top: 0px;
    padding: 0px 20px 45px 20px;
    background-color: white; /* یک پس‌زمینه بسیار ملایم برای جداسازی */
}

/* 2. گرید کارت‌ها */
.lp-cat-grid {
    display: grid;
    /* این بخش ستون‌ها را به صورت هوشمند و واکنشگرا مدیریت می‌کند */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px; /* فاصله بین کارت‌ها */
    margin-top: 40px;
}

/* 3. طراحی هر کارت دسته‌بندی */
.lp-cat-card {
    display: block; /* برای اینکه کل کارت قابل کلیک باشد */
    text-decoration: none;
    background-color: #f8f9fa;
    border: 1px solid #eef0f3; /* یک حاشیه بسیار روشن و مدرن */
    border-radius: 12px; /* گوشه‌های نرم‌تر */
    text-decoration: none !important;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 4. افکت هاور (حرکت به بالا و سایه) */
.lp-cat-card:hover {
    transform: translateY(-8px); /* افکت شناور شدن به سمت بالا */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* سایه نرم‌تر و حرفه‌ای‌تر */
    border-color: #EA7627; /* حاشیه با رنگ اصلی شما */
}

/* 5. آیکون دسته‌بندی */
.lp-cat-icon {
    margin-bottom: 20px;
}

.lp-cat-icon img {
    width: 48px; /* اندازه بزرگتر برای آیکون */
    height: 48px;
    object-fit: contain;
}

/* 6. عنوان دسته‌بندی */
.lp-cat-title {
    font-size: 18px; /* فونت کمی بزرگتر و خواناتر */
    font-weight: 600; /* استفاده از semi-bold به جای bold */
    color: #111; /* رنگ تیره‌تر برای کنتراست بهتر */
    margin-bottom: 8px;
}

/* 7. تعداد دوره‌ها */
.lp-cat-count {
    font-size: 14px;
    color: #777; /* رنگ خاکستری برای اطلاعات فرعی */
}

/* 8. دکمه "مشاهده همه" در پایین بخش */
.lp-cat-button-wrap {
    margin-top: 50px;
}

.lp-cat-button {
    display: inline-block;
    padding: 14px 40px; /* دکمه بزرگتر و مهم‌تر */
    background-color: #EA7627; /* استفاده از رنگ اصلی شما */
    color: #fff;
    border-radius: 8px; /* گوشه‌های مدرن */
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.lp-cat-button:hover {
    background-color: #c4621f; /* نسخه تیره‌تر در حالت هاور */
    transform: translateY(-2px);
}/* End custom CSS */