.elementor-kit-130{--e-global-color-primary:#0EA5E9;--e-global-color-secondary:#64748B;--e-global-color-text:#334155;--e-global-color-accent:#61CE70;--e-global-color-a44818d:#F8FAFC;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Vazirmatn", Sans-serif;}.elementor-kit-130 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* این کدها را در مسیر زیر کپی کنید:
   پیشخوان وردپرس > المنتور > تنظیمات سایت (Site Settings) > CSS سفارشی (Custom CSS)
   
   یا اگر از نسخه رایگان استفاده می‌کنید:
   نمایش > سفارشی‌سازی > CSS اضافی
*/

/* 1. انیمیشن و افکت کارت‌ها (Services & Projects) */
/* به ویجت‌های ستون یا کانتینر کارت‌ها، کلاس css: .hover-card بدهید */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e2e8f0; /* رنگ بوردر ملایم */
}

.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: #0ea5e9 !important; /* تغییر رنگ بوردر به آبی */
}

/* 2. پترن پس‌زمینه هیرو (Hero Section Pattern) */
/* به سکشن اصلی بالای صفحه کلاس css: .hero-bg بدهید */
.hero-bg {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23334155' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 3. افکت گرادینت متن (Text Gradient) */
/* برای عنوان‌هایی که می‌خواهید رنگی باشند، کلاس: .text-gradient */
.text-gradient h1, .text-gradient h2, .text-gradient span {
    background: linear-gradient(to right, #38bdf8, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 4. استایل لیست‌های چک‌مارک دار */
/* اگر از ویجت Text Editor استفاده می‌کنید و لیست ul دارید */
.custom-check-list ul {
    list-style: none;
    padding: 0;
}
.custom-check-list ul li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 10px;
}
.custom-check-list ul li::before {
    content: "\f00c"; /* کد آیکون چک فونت آوسام */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #0ea5e9;
    position: absolute;
    right: 0;
    top: 3px;
}

/* 5. انیمیشن کابل قطع شده (برای صفحه 404) */
.cable-swing {
    animation: swing 3s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes swing {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
}

/* 6. اصلاح فونت‌ها */
body, h1, h2, h3, h4, h5, h6, p, a, span, div {
    font-family: 'Vazirmatn', sans-serif !important;
}


/* استایل کلی سایدبار */
.custom-sidebar {
    position: sticky;
    top: 100px; /* چسبندگی هنگام اسکرول */
}

/* 1. استایل منوی ناوبری (Navigation Menu) */
.sidebar-nav-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 10px 0;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.sidebar-nav-list .elementor-icon-list-item {
    padding: 0 !important;
}

.sidebar-nav-list a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px !important;
    color: #475569 !important; /* رنگ متن عادی */
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 500;
    font-size: 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease !important;
    width: 100%;
}

/* حذف خط آخر */
.sidebar-nav-list .elementor-icon-list-item:last-child a {
    border-bottom: none;
}

/* افکت هاور و آیتم فعال */
.sidebar-nav-list a:hover, 
.sidebar-nav-list a.active-link {
    background-color: #f8fafc;
    color: #0ea5e9 !important; /* رنگ آبی برند */
    padding-right: 32px !important; /* حرکت به چپ */
    border-right: 4px solid #0ea5e9; /* خط رنگی سمت راست */
}

/* اضافه کردن آیکون فلش به چپ با CSS */
.sidebar-nav-list a::after {
    content: '\f053'; /* کد آیکون Chevron Left */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    opacity: 0.4;
    transition: transform 0.3s;
}

.sidebar-nav-list a:hover::after {
    opacity: 1;
    transform: translateX(-5px);
}

/* 2. استایل باکس تماس/هشدار (Alert Box) */
.sidebar-alert-box {
    background-color: #fef2f2; /* قرمز خیلی روشن */
    border: 1px solid #fee2e2;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.sidebar-alert-icon {
    font-size: 32px;
    color: #ef4444;
    margin-bottom: 15px;
    display: inline-block;
    animation: bell-ring 3s infinite;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(10deg); }
    20%, 40%, 60%, 80% { transform: rotate(-10deg); }
}


/* --- استایل بخش نظرات و پرسش و پاسخ --- */

/* 1. کانتینر اصلی بخش نظرات */
#comments {
    background-color: #f8fafc; /* پس‌زمینه خیلی روشن */
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-top: 60px;
}

/* 2. تیتر بخش نظرات */
#comments h3 {
    color: #0f172a;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    border-right: 4px solid #0ea5e9; /* خط آبی کنار تیتر */
    padding-right: 15px;
}

/* 3. استایل لیست نظرات (کارت‌ها) */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-body {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.2s;
}

.comment-body:hover {
    transform: translateX(-5px); /* حرکت جزئی هنگام هاور */
    border-color: #cbd5e1;
}

/* آواتار کاربر */
.comment-body img.avatar {
    float: right;
    margin-left: 20px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    width: 60px;
    height: 60px;
}

/* نام کاربر و تاریخ */
.comment-meta {
    margin-bottom: 10px;
    font-size: 13px;
    color: #94a3b8;
}
.fn {
    font-size: 16px;
    font-weight: bold;
    color: #0f172a;
    font-style: normal;
    margin-left: 10px;
}

/* متن نظر */
.comment-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 10px;
}

/* دکمه پاسخ */
.reply a {
    color: #0ea5e9;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #0ea5e9;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.3s;
}
.reply a:hover {
    background-color: #0ea5e9;
    color: white;
}

/* 4. استایل فرم ارسال نظر */
#respond {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px dashed #e2e8f0;
}

#reply-title {
    font-size: 20px;
    font-weight: bold;
    color: #334155;
    margin-bottom: 20px;
    display: block;
}

/* فیلدها (تکست‌اریا و اینپوت) */
#respond textarea, 
#respond input[type="text"], 
#respond input[type="email"] {
    width: 100%;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Vazirmatn', sans-serif;
    color: #334155;
    transition: all 0.3s;
    margin-bottom: 15px;
}

#respond textarea:focus, 
#respond input:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    outline: none;
}

/* دکمه ارسال */
#respond input[type="submit"] {
    background-color: #0f172a; /* سرمه‌ای تیره */
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

#respond input[type="submit"]:hover {
    background-color: #0ea5e9; /* آبی روشن */
}


/* 1. استایل کارت‌های مقاله (Archive Loop) */
/* اگر از ویجت Posts استفاده می‌کنید، این کلاس‌ها روی آن اعمال می‌شود */
.custom-blog-grid .elementor-post {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    padding: 0 !important; /* حذف پدینگ پیش‌فرض */
}

.custom-blog-grid .elementor-post:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #0ea5e9;
}

/* افکت زوم روی تصویر شاخص */
.custom-blog-grid .elementor-post__thumbnail img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 220px; /* ارتفاع ثابت عکس */
    object-fit: cover;
}
.custom-blog-grid .elementor-post:hover .elementor-post__thumbnail img {
    transform: scale(1.08);
}

/* استایل محتوای کارت */
.custom-blog-grid .elementor-post__text {
    padding: 24px;
}
.custom-blog-grid .elementor-post__title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
}
.custom-blog-grid .elementor-post__title a {
    color: #0f172a;
    transition: color 0.3s;
}
.custom-blog-grid .elementor-post__title a:hover {
    color: #0ea5e9;
}

/* دکمه ادامه مطلب */
.custom-blog-grid .elementor-post__read-more {
    font-size: 13px;
    font-weight: bold;
    color: #0ea5e9;
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
}
.custom-blog-grid .elementor-post__read-more::after {
    content: '\f060'; /* فلش چپ */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 12px;
    transition: transform 0.3s;
}
.custom-blog-grid .elementor-post__read-more:hover::after {
    transform: translateX(-5px);
}

/* 2. استایل ویجت‌های سایدبار */
/* لیست دسته‌بندی‌ها */
.blog-sidebar-cats ul { list-style: none; padding: 0; margin: 0; }
.blog-sidebar-cats li a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
    color: #64748b;
    font-size: 14px;
    transition: all 0.3s;
}
.blog-sidebar-cats li:last-child a { border-bottom: none; }
.blog-sidebar-cats li a:hover { color: #0ea5e9; padding-right: 5px; }

/* شمارنده دسته‌بندی (Badge) */
.blog-sidebar-cats .count {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
}

/* 3. باکس خبرنامه (آبی) */
.sidebar-newsletter {
    background-color: #0ea5e9;
    background-image: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    color: white;
}
.sidebar-newsletter input {
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    margin-bottom: 10px;
    color: #334155;
}
.sidebar-newsletter button {
    background: #0f172a;
    color: white;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}
.sidebar-newsletter button:hover { background: #1e293b; }

/* 4. استایل ابرها برچسب (Tags) */
.blog-tags a {
    display: inline-block;
    background: #f1f5f9;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    margin: 0 4px 8px 0;
    transition: all 0.3s;
}
.blog-tags a:hover {
    background: #0ea5e9;
    color: white;
}/* End custom CSS */