/* ------------------------------------------- */
/* ۱. تعریف و بارگذاری فونت‌ها */
/* ------------------------------------------- */

/* فونت Andalus برای نام شرکت و عناوین اصلی */
@font-face {
    font-family: 'Andalus';
    src: url('fonts/Andalus.ttf') format('truetype'); /* مسیر فایل فونت Andalus */
    font-weight: normal;
    font-style: normal;
}

/* فونت Koodak برای متن‌های عمومی و سایر عناوین */
@font-face {
    font-family: 'Koodak';
    src: url('fonts/Koodak.ttf') format('truetype'); /* مسیر فایل فونت Koodak */
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------- */
/* ۲. تنظیمات عمومی برای کل صفحه */
/* ------------------------------------------- */
body {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* فونت اصلی برای متن‌های عمومی */
    margin: 0; /* حذف مارجین پیش‌فرض مرورگر */
    padding: 0; /* حذف پدینگ پیش‌فرض مرورگر */
    background-color: #ECF0F1; /* رنگ پس‌زمینه کلی: خاکستری نقره‌ای روشن */
    color: #333; /* رنگ متن اصلی: خاکستری تیره */
    line-height: 1.7; /* فاصله بین خطوط برای خوانایی بهتر */
    direction: rtl; /* جهت متن راست به چپ برای زبان فارسی */
    text-align: right; /* تراز متن به راست */
    /* اضافه کردن یک پس‌زمینه ظریف برای بافت */
    /* اگر این پس‌زمینه مشکل ایجاد می‌کند، می‌توانید آن را حذف کنید */
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
                      linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* ------------------------------------------- */
/* ۳. استایل دهی به هدر (بالای صفحه) */
/* ------------------------------------------- */
header {
    background-color: #C0392B; /* رنگ هدر: قرمز آجری تیره (رنگ اصلی شرکت) */
    color: #FFFFFF; /* رنگ متن هدر: سفید */
    padding: 1rem 0; /* پدینگ بالا و پایین */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* سایه عمیق‌تر برای هدر */
    display: flex; /* برای چیدمان لوگو و عنوان در یک ردیف */
    flex-direction: column; /* ابتدا لوگو و عنوان، سپس منو */
    align-items: center; /* تراز افقی در مرکز */
    border-bottom-left-radius: 25px; /* گرد کردن گوشه پایین چپ */
    border-bottom-right-radius: 25px; /* گرد کردن گوشه پایین راست */
    padding-bottom: 1.5rem; /* افزایش پدینگ پایین برای فضای بیشتر با گوشه‌های گرد */
}

.header-content {
    display: flex;
    flex-direction: column; /* لوگو بالای عنوان */
    align-items: center;
    margin-bottom: 1rem; /* فاصله بین لوگو/عنوان و منو */
}

/* کانتینر لوگو برای تنظیم فاصله */
.logo-container {
    margin-bottom: 10px; /* فاصله بین لوگو و عنوان */
}

/* استایل دهی به تصویر لوگو */
.company-logo {
    max-width: 150px; /* اندازه لوگو کمی کوچتر برای هدر */
    height: auto; /* ارتفاع خودکار برای حفظ نسبت تصویر */
    display: block; /* برای اینکه margin auto کار کند */
    margin: 0 auto; /* قرار دادن لوگو در مرکز */
    border: 2px solid #F39C12; /* حاشیه طلایی/نارنجی دور لوگو */
    border-radius: 5px; /* گوشه‌های گرد حاشیه */
    padding: 3px; /* پدینگ داخلی حاشیه */
    box-shadow: 0 0 8px rgba(0,0,0,0.4); /* سایه برای برجسته‌سازی لوگو */
    transition: transform 0.3s ease; /* انیمیشن برای هاور */
}
.company-logo:hover {
    transform: scale(1.05); /* کمی بزرگ‌تر شدن لوگو هنگام هاور */
}

/* استایل دهی به عنوان اصلی هدر */
header h1 {
    font-family: 'Andalus', serif; /* اعمال فونت Andalus برای عنوان اصلی */
    margin: 0; /* حذف مارجین پیش‌فرض */
    font-size: 2.8em; /* اندازه عنوان */
    letter-spacing: 1px; /* کمی فاصله بین حروف */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3); /* سایه متن برای برجستگی */
}

/* ------------------------------------------- */
/* ۴. استایل دهی به نوار ناوبری (منو) */
/* ------------------------------------------- */
nav ul {
    list-style: none; /* حذف نشانگرهای لیست */
    padding: 0; /* حذف پدینگ پیش‌فرض */
    margin: 0;
    display: flex; /* آیتم‌ها کنار هم قرار گیرند */
    justify-content: center; /* آیتم‌ها در مرکز تراز شوند */
    flex-wrap: wrap; /* برای ریسپانسیو بودن منو در صفحات کوچک */
}

nav ul li {
    margin: 0 20px; /* فاصله بین آیتم‌های منو */
}

nav ul li a {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: #FFFFFF; /* رنگ لینک‌ها: سفید */
    text-decoration: none; /* حذف خط زیر لینک‌ها */
    font-weight: bold; /* پررنگ کردن متن */
    font-size: 1.15em; /* اندازه متن لینک */
    padding-bottom: 5px; /* پدینگ برای خط زیر لینک هنگام هاور */
    transition: all 0.3s ease; /* انیمیشن نرم برای تغییرات */
    position: relative; /* برای افکت زیرخط */
}

/* افکت زیرخط جذاب‌تر برای منو */
nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F39C12; /* رنگ طلایی/نارنجی */
    transition: width 0.3s ease-out;
}

nav ul li a:hover::after {
    width: 100%; /* زیرخط از وسط باز شود */
}

nav ul li a:hover {
    color: #F39C12; /* رنگ هاور: طلایی/نارنجی */
    /* border-bottom: 2px solid #F39C12;  این خط دیگر نیازی نیست */
}

/* ------------------------------------------- */
/* ۵. استایل دهی به بخش اصلی محتوا (main) و سکشن‌ها */
/* ------------------------------------------- */
main {
    padding: 30px; /* پدینگ کلی برای محتوا */
    max-width: 1100px; /* حداکثر عرض محتوا */
    margin: 30px auto; /* قرار گرفتن محتوا در مرکز با فاصله از بالا و پایین */
    background-color: #FFFFFF; /* پس‌زمینه اصلی محتوا: سفید */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* سایه ملایم */
    border-radius: 10px; /* گوشه‌های گرد */
}

section {
    margin-bottom: 40px; /* فاصله بین سکشن‌ها */
    padding-bottom: 30px; /* پدینگ پایین برای محتوا */
    border-bottom: 1px dashed #BDC3C7; /* خط جداکننده نقطه‌چین */
}

section:last-child {
    border-bottom: none; /* حذف خط جداکننده برای آخرین سکشن */
}

/* استایل دهی به عنوان‌های سکشن‌ها */
section h2 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: #C0392B; /* رنگ عنوان سکشن: قرمز آجری تیره */
    font-size: 2.2em; /* اندازه عنوان سکشن */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #C0392B; /* خط زیر عنوان سکشن */
    display: inline-block; /* برای اینکه خط فقط زیر متن عنوان باشد */
    text-align: center; /* تراز عنوان سکشن در مرکز (در صورت نیاز) */
    width: 100%; /* برای اعمال text-align: center به h2 در flexbox */
}

/* استایل دهی به پاراگراف‌ها */
section p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1.1em; /* اندازه متن پاراگراف */
    line-height: 1.8; /* افزایش فاصله بین خطوط */
    text-align: justify; /* تراز دو طرفه برای متن پاراگراف‌ها */
}

/* ------------------------------------------- */
/* ۶. استایل دهی به فوتر (پایین صفحه) */
/* ------------------------------------------- */
footer {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    background-color: #2C3E50; /* رنگ فوتر: خاکستری ذغالی */
    color: #BDC3C7; /* رنگ متن فوتر: خاکستری روشن */
    text-align: center; /* تراز متن در مرکز */
    padding: 1.8rem 0; /* پدینگ بالا و پایین */
    margin-top: 40px; /* فاصله از محتوای بالا */
    font-size: 0.95em;
}

/* استایل دهی به لینک‌های شبکه‌های اجتماعی در فوتر */
.social-links {
    margin-top: 10px;
}
.social-links a {
    color: #BDC3C7; /* رنگ لینک‌ها */
    text-decoration: none; /* حذف خط زیر */
    margin: 0 8px; /* فاصله بین لینک‌ها */
    transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
}

.social-links a:hover {
    color: #F39C12; /* رنگ هاور: طلایی/نارنجی */
}

/* ------------------------------------------- */
/* ۷. استایل دهی به اسلایدشو (Hero Section) */
/* ------------------------------------------- */
.slider-container {
    max-width: 100%; /* اسلایدشو تمام عرض صفحه را بگیرد */
    height: 450px; /* ارتفاع ثابت برای دسکتاپ */
    position: relative; /* برای قرارگیری دکمه‌ها و متن روی تصویر */
    margin: 0 auto; /* مرکز قرار گرفتن اسلایدشو */
    overflow: hidden; /* مخفی کردن بخش‌های اضافی تصاویر */
    border-radius: 10px; /* گوشه‌های گرد */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* سایه ملایم‌تر برای اسلایدشو */
}

.slider-image {
    display: none; /* به طور پیش‌فرض مخفی کردن همه تصاویر */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-image img {
    width: 100%; /* عرض کامل کانتینر */
    height: 100%; /* ارتفاع کامل کانتینر */
    object-fit: cover; /* پر کردن کانتینر با حفظ نسبت تصویر و کراپ کردن اضافی */
    vertical-align: middle; /* حذف فضای خالی زیر تصویر */
}

/* استایل دهی به دکمه‌های ناوبری چپ و راست اسلایدشو */
.prev, .next {
    cursor: pointer; /* تغییر نشانگر موس به دست */
    position: absolute; /* موقعیت مطلق روی اسلایدشو */
    top: 50%; /* وسط عمودی */
    width: auto;
    padding: 16px; /* پدینگ پیش‌فرض */
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px; /* اندازه فونت پیش‌فرض */
    transition: 0.6s ease; /* انیمیشن نرم */
    border-radius: 0 3px 3px 0; /* گوشه‌های گرد */
    user-select: none;
    background-color: rgba(0,0,0,0.5); /* پس‌زمینه نیمه‌شفاف */
    z-index: 10;
    text-shadow: none; /* حذف سایه متن دکمه */
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

/* تغییر رنگ دکمه‌ها هنگام هاور */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8); /* تیره‌تر شدن پس‌زمینه هنگام هاور */
    transform: none; /* حذف افکت بزرگ‌تر شدن */
}

/* افکت محو شدن برای اسلایدها */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* ------------------------------------------- */
/* ۸. استایل دهی به متن روی اسلایدشو (Hero Text) و دکمه فراخوان */
/* ------------------------------------------- */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* عرض متن پیش‌فرض */
    padding: 20px; /* پدینگ پیش‌فرض */
    background-color: rgba(0, 0, 0, 0.5); /* پس‌زمینه نیمه شفاف پیش‌فرض */
    border-radius: 8px; /* گوشه‌های گرد */
    text-align: center;
    z-index: 5;
    animation: fadeInScale 1s ease-out forwards;
    box-shadow: none; /* حذف سایه برای متن */
}

/* انیمیشن ورود متن */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.9); /* شروع پیش‌فرض */
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.hero-text h2 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 3.5em; /* اندازه عنوان پیش‌فرض */
    margin-bottom: 15px;
    color: #FFFFFF;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* سایه متن پیش‌فرض */
    line-height: 1.2;
    letter-spacing: normal; /* حذف فاصله بین حروف */
}

.hero-text p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1.4em; /* اندازه پاراگراف پیش‌فرض */
    line-height: 1.6;
    margin-bottom: 30px; /* فاصله پیش‌فرض تا دکمه */
    color: #f0f0f0; /* رنگ پیش‌فرض */
    text-shadow: none; /* حذف سایه متن */
}

/* استایل دهی به دکمه‌های فراخوان (CTA) */
.btn-cta {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    display: inline-block;
    background-color: #F39C12; /* رنگ طلایی/نارنجی برای دکمه */
    color: white;
    padding: 15px 30px; /* پدینگ پیش‌فرض */
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2em; /* فونت پیش‌فرض */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease; /* انیمیشن نرم */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* سایه پیش‌فرض */
    letter-spacing: normal; /* حذف فاصله بین حروف */
}

/* استایل دکمه کوچتر برای بخش درباره ما */
.btn-cta.small-btn {
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    background-color: #C0392B;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-cta.small-btn:hover {
    background-color: #A52A2A;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* افکت هاور برای دکمه‌های CTA */
.btn-cta:hover {
    background-color: #E67E22;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------- */
/* ۹. استایل دهی به بخش درباره شرکت (About Us Section) */
/* ------------------------------------------- */
.about-us-section .about-content {
    display: flex;
    flex-direction: row-reverse; /* تصویر در سمت راست، متن در سمت چپ */
    align-items: flex-start; /* تراز بالا برای محتوا */
    gap: 30px; /* فاصله بین تصویر و متن */
    margin-top: 30px;
}

.about-us-section .about-image {
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    flex-shrink: 0; /* جلوگیری از کوچک شدن تصویر */
}

.about-us-section .about-text {
    flex-grow: 1; /* متن فضای باقی‌مانده را پر کند */
}

/* استایل دهی به باکس اطلاعات شرکت */
.company-details-box {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0; /* جلوگیری از کوچک شدن باکس */
    width: 300px; /* عرض ثابت برای باکس اطلاعات */
}

.company-details-box h4 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 1.4em;
    margin-bottom: 15px;
    border-bottom: 1px solid #F39C12;
    padding-bottom: 8px;
}

.company-details-box p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 1em;
    margin-bottom: 8px;
    text-align: right;
}

/* استایل دهی به لیست ارزش‌ها */
.intro-text ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.intro-text ul li {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    background-color: #f0f0f0;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.intro-text ul li strong {
    color: #C0392B; /* رنگ قرمز برای کلمات کلیدی */
    margin-left: 5px;
}

/* استایل دهی به بخش گواهینامه‌ها و مجوزها */
.certificates-section {
    text-align: center;
}

.certificates-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* فاصله بین آیتم‌ها */
    margin-top: 30px;
}

.certificate-item {
    background-color: #FFFFFF;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 15px; /* پدینگ داخلی */
    flex: 0 0 auto; /* جلوگیری از کشیدگی بیش از حد */
    width: calc(16.666% - 40px); /* 6 آیتم در هر سطر برای دسکتاپ */
    max-width: 160px; /* حداکثر عرض هر آیتم */
    display: flex;
    flex-direction: column;
    align-items: center; /* وسط‌چین کردن محتوا */
    justify-content: space-between; /* توزیع فضا بین محتوا */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificate-item:hover {
    transform: translateY(-5px); /* کمی بالا رفتن هنگام هاور */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.certificate-item .certificate-image {
    max-width: 100px; /* حداکثر عرض تصویر گواهینامه */
    height: 120px; /* ارتفاع ثابت تصویر گواهینامه */
    object-fit: contain; /* کل تصویر در کادر جای بگیرد */
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.certificate-item p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 0.85em; /* اندازه فونت کوچک‌تر */
    color: #555;
    margin: 0;
    line-height: 1.3;
}

/* استایل خاص برای پروانه کسب (که عریض‌تر است) */
.certificate-item.wide-item {
    flex: 0 0 auto;
    width: calc(33.333% - 40px); /* 3 آیتم در هر سطر (معادل 2 ستون از 6 ستون) */
    max-width: 350px; /* حداکثر عرض برای آیتم عریض */
}

.certificate-item.wide-item .certificate-image {
    max-width: 150px; /* عرض بیشتر برای تصویر پروانه کسب */
    height: 150px; /* ارتفاع بیشتر برای تصویر پروانه کسب */
}


/* ------------------------------------------- */
/* ۱۰. استایل دهی به بخش خدمات اصلی (Service Cards) */
/* ------------------------------------------- */
.services-section {
    text-align: center; /* تراز کردن محتوا در مرکز */
}

.services-section h2 {
    text-align: center; /* اطمینان از تراز وسط عنوان خدمات */
}

.service-cards-container {
    display: flex;
    flex-wrap: wrap; /* برای اینکه کارت‌ها در صفحات کوچک به خط بعدی بروند */
    justify-content: center; /* چیدمان کارت‌ها در مرکز */
    gap: 30px; /* فاصله بین کارت‌ها */
    margin-top: 30px;
}

.service-card {
    background-color: #FFFFFF; /* پس‌زمینه سفید */
    border: 1px solid #ddd; /* حاشیه نازک */
    border-radius: 10px; /* گوشه‌های گرد */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* سایه ملایم */
    padding: 25px; /* پدینگ داخلی */
    flex: 1 1 calc(33.333% - 60px); /* سه کارت در هر سطر با در نظر گرفتن فاصله */
    max-width: 350px; /* حداکثر عرض هر کارت */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم */
}

.service-card:hover {
    transform: translateY(-8px); /* کمی بالا رفتن کارت هنگام هاور */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* سایه بیشتر */
}

.service-card .service-icon {
    width: 60px; /* اندازه آیکون پیش‌فرض */
    height: 60px; /* اندازه آیکون پیش‌فرض */
    margin-bottom: 15px;
}

.service-card h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: #C0392B; /* رنگ قرمز برای عنوان کارت */
    font-size: 1.6em; /* کمی کوچک‌تر از h2 سکشن */
    margin-bottom: 10px;
}

.service-card p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1em;
    color: #555;
    text-align: center; /* متن وسط‌چین در کارت‌ها */
}

/* ------------------------------------------- */
/* ۱۱. استایل دهی به بخش چرا ما را انتخاب کنید (Why Choose Us) */
/* ------------------------------------------- */
.why-choose-us-section h2 {
    text-align: center;
}

.why-choose-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.why-item {
    background-color: #ECF0F1; /* پس‌زمینه خاکستری روشن */
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    flex: 1 1 calc(45% - 40px); /* دو آیتم در هر سطر */
    max-width: 500px;
}

.why-item p {
    margin: 0;
    margin-right: 10px; /* فاصله از تیک */
    font-size: 1.05em;
    text-align: right; /* تراز راست متن */
}

/* ------------------------------------------- */
/* ۱۲. استایل دهی به بخش مقالات (Articles Section) */
/* ------------------------------------------- */
.articles-section {
    text-align: center; /* تراز محتوا در مرکز */
}

.articles-section h2 {
    text-align: center;
}

.articles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.article-card {
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 20px;
    flex: 1 1 calc(33.333% - 60px); /* سه کارت در هر سطر */
    max-width: 350px;
    text-align: right; /* تراز متن داخل کارت به راست */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.article-card h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: #C0392B;
    font-size: 1.5em;
    margin-bottom: 10px;
    line-height: 1.4;
}

.article-card p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 0.95em;
    color: #555;
    margin-bottom: 15px;
    text-align: justify; /* تراز دو طرفه */
}

.article-card .read-more {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    display: inline-block;
    color: #F39C12;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.article-card .read-more:hover {
    color: #E67E22;
}

.view-all-articles {
    margin-top: 40px;
    text-align: center;
}

/* استایل دهی به محتوای کامل مقالات در صفحه articles.html */
.full-article-content {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px dashed #BDC3C7;
    text-align: justify;
}

.full-article-content h2 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 2.5em;
    margin-bottom: 20px;
    border-bottom: 2px solid #F39C12;
    padding-bottom: 10px;
    display: inline-block;
    width: 100%;
    text-align: right;
}

.full-article-content .article-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
    text-align: right;
}

.full-article-content p {
    margin-bottom: 15px;
    text-align: justify;
}

.full-article-content h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #A52A2A;
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    text-align: right;
}

.full-article-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.full-article-content ul li {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    background-color: #f8f8f8;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.full-article-content ul li::before {
    content: '📚'; /* آیکون کتاب برای لیست مقالات */
    margin-left: 10px;
    color: #2C3E50;
    font-size: 1.1em;
}

.full-article-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


/* ------------------------------------------- */
/* ۱۳. استایل دهی به بخش تماس سریع / فراخوان به عمل */
/* ------------------------------------------- */
.call-to-action-section {
    background-color: #C0392B; /* رنگ قرمز آجری */
    color: white;
    text-align: center;
    padding: 50px 20px;
    border-radius: 10px;
    margin-top: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.call-to-action-section h2 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: white;
    font-size: 2.8em;
    margin-bottom: 15px;
    border-bottom: none; /* حذف خط زیر */
}

.call-to-action-section p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #f0f0f0;
}

.call-to-action-section .btn-cta {
    background-color: #F39C12; /* دکمه طلایی */
    color: white;
}

.call-to-action-section .btn-cta:hover {
    background-color: #E67E22;
}

/* ------------------------------------------- */
/* ۱۴. استایل دهی به صفحه خدمات (services.html) */
/* ------------------------------------------- */
.page-hero-section {
    background-color: #A52A2A; /* رنگ قرمز تیره مشابه هدر */
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.page-hero-section h2 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: white;
    font-size: 3em;
    margin-bottom: 15px;
    border-bottom: none; /* حذف خط زیر */
}

.page-hero-section p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1.3em;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.detailed-services-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* فاصله بیشتر بین کارت‌های جزئیات خدمات */
}

.service-detail-card {
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    padding: 30px;
    flex: 1 1 calc(33.333% - 80px); /* سه کارت در هر سطر */
    max-width: 400px;
    text-align: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-detail-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.service-detail-card h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    color: #C0392B;
    font-size: 1.8em;
    margin-bottom: 15px;
    border-bottom: 2px solid #F39C12;
    padding-bottom: 10px;
    display: inline-block;
}

.service-detail-card p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    font-size: 1.05em;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.service-detail-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.service-detail-card ul li {
    font-family: 'Koodak', Tahoma, Arial, sans-serif; /* اعمال فونت Koodak */
    background-color: #f5f5f5;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 0.95em;
}

.service-detail-card ul li::before {
    content: '✔️'; /* آیکون تیک برای لیست */
    margin-left: 10px;
    color: #28A745; /* رنگ سبز */
    font-size: 1.1em;
}

.service-detail-card .btn-cta {
    margin-top: 15px;
}

.service-detail-image {
    width: 100%;
    height: 200px; /* ارتفاع ثابت برای تصاویر کارت خدمات */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ------------------------------------------- */
/* ۱۵. استایل دهی به صفحه محصولات (products.html) */
/* ------------------------------------------- */
.products-grid-section {
    text-align: center;
}

.products-grid-section h2 {
    text-align: center;
}

.products-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* فاصله بین کارت‌های محصول */
    margin-top: 30px;
}

.product-card {
    background-color: #FFFFFF;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 20px;
    flex: 1 1 calc(33.333% - 60px); /* سه کارت در هر سطر */
    max-width: 350px;
    text-align: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.product-image {
    width: 100%;
    height: 220px; /* ارتفاع ثابت برای تصاویر محصول */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-card h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 1.6em;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: center; /* عنوان محصول در مرکز */
}

.product-card p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 0.95em;
    color: #555;
    margin-bottom: 20px;
    text-align: justify; /* متن محصول تراز دو طرفه */
}

.product-card .btn-cta {
    margin-top: 10px;
}

/* ------------------------------------------- */
/* ۱۶. استایل دهی به مودال (پاپ‌آپ جزئیات محصول) */
/* ------------------------------------------- */
.modal-overlay {
    display: none; /* به طور پیش‌فرض مخفی است */
    position: fixed; /* ثابت در صفحه */
    z-index: 100; /* بالاتر از سایر عناصر */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* امکان اسکرول در صورت نیاز */
    background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه نیمه شفاف */
    justify-content: center; /* برای مرکز قرار دادن مودال */
    align-items: center; /* برای مرکز قرار دادن مودال */
    padding: 20px; /* پدینگ برای جلوگیری از چسبیدن به لبه‌ها در موبایل */
}

.product-detail-modal {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%; /* عرض مودال */
    max-width: 700px; /* حداکثر عرض مودال */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative; /* برای دکمه بستن */
    animation: fadeInModal 0.3s ease-out; /* انیمیشن ورود مودال */
    text-align: right; /* تراز متن به راست */
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* در JS موقعیت را تنظیم می‌کنیم */
}

.close-button {
    color: #aaa;
    float: left; /* قرار گرفتن در سمت چپ (بالا راست در RTL) */
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    left: 20px; /* موقعیت دقیق در RTL */
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #C0392B; /* رنگ قرمز هنگام هاور */
    text-decoration: none;
    cursor: pointer;
}

.modal-product-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-detail-modal h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 2.2em;
    margin-bottom: 15px;
    border-bottom: 2px solid #F39C12;
    padding-bottom: 10px;
    display: inline-block;
    width: auto; /* برای اینکه خط زیر فقط زیر متن باشه */
}

.product-detail-modal p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.product-detail-modal ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.product-detail-modal ul li {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    background-color: #f8f8f8;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1em;
}

.product-detail-modal ul li::before {
    content: '✔️';
    margin-left: 10px;
    color: #28A745;
    font-size: 1.1em;
}

.product-detail-modal .btn-cta {
    margin-top: 20px;
    width: auto; /* دکمه اندازه محتواش باشه */
    text-align: center; /* متن دکمه وسط‌چین */
}


/* ------------------------------------------- */
/* ۱۷. استایل دهی به صفحه درباره ما (about.html) */
/* ------------------------------------------- */
.company-intro-section {
    text-align: center;
}

.company-intro-section .intro-content {
    display: flex;
    flex-direction: row-reverse; /* تصویر در سمت راست، متن در سمت چپ */
    align-items: flex-start; /* تراز بالا برای محتوا */
    gap: 30px; /* فاصله بین تصویر و متن */
    margin-top: 30px;
}

.company-intro-section .intro-text {
    flex-grow: 1; /* متن فضای باقی‌مانده را پر کند */
}

.company-intro-section .intro-text h3 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 1.8em;
    margin-bottom: 15px;
    border-bottom: 2px solid #F39C12;
    padding-bottom: 8px;
    display: inline-block;
}

.company-intro-section .intro-text p {
    text-align: justify;
}

/* استایل دهی به باکس اطلاعات شرکت */
.company-details-box {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0; /* جلوگیری از کوچک شدن باکس */
    width: 300px; /* عرض ثابت برای باکس اطلاعات */
}

.company-details-box h4 {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    color: #C0392B;
    font-size: 1.4em;
    margin-bottom: 15px;
    border-bottom: 1px solid #F39C12;
    padding-bottom: 8px;
}

.company-details-box p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 1em;
    margin-bottom: 8px;
    text-align: right;
}

/* استایل دهی به لیست ارزش‌ها */
.intro-text ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.intro-text ul li {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    background-color: #f0f0f0;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.intro-text ul li strong {
    color: #C0392B; /* رنگ قرمز برای کلمات کلیدی */
    margin-left: 5px;
}

/* استایل دهی به بخش گواهینامه‌ها و مجوزها */
.certificates-section {
    text-align: center;
}

.certificates-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* فاصله بین آیتم‌ها */
    margin-top: 30px;
}

.certificate-item {
    background-color: #FFFFFF;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 15px; /* پدینگ داخلی */
    flex: 0 0 auto; /* جلوگیری از کشیدگی بیش از حد */
    width: calc(16.666% - 40px); /* 6 آیتم در هر سطر برای دسکتاپ */
    max-width: 160px; /* حداکثر عرض هر آیتم */
    display: flex;
    flex-direction: column;
    align-items: center; /* وسط‌چین کردن محتوا */
    justify-content: space-between; /* توزیع فضا بین محتوا */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificate-item:hover {
    transform: translateY(-5px); /* کمی بالا رفتن هنگام هاور */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.certificate-item .certificate-image {
    max-width: 100px; /* حداکثر عرض تصویر گواهینامه */
    height: 120px; /* ارتفاع ثابت تصویر گواهینامه */
    object-fit: contain; /* کل تصویر در کادر جای بگیرد */
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.certificate-item p {
    font-family: 'Koodak', Tahoma, Arial, sans-serif;
    font-size: 0.85em; /* اندازه فونت کوچک‌تر */
    color: #555;
    margin: 0;
    line-height: 1.3;
}

/* استایل خاص برای پروانه کسب (که عریض‌تر است) */
.certificate-item.wide-item {
    flex: 0 0 auto;
    width: calc(33.333% - 40px); /* 3 آیتم در هر سطر (معادل 2 ستون از 6 ستون) */
    max-width: 350px; /* حداکثر عرض برای آیتم عریض */
}

.certificate-item.wide-item .certificate-image {
    max-width: 150px; /* عرض بیشتر برای تصویر پروانه کسب */
    height: 150px; /* ارتفاع بیشتر برای تصویر پروانه کسب */
}


/* ------------------------------------------- */
/* ۱۸. ریسپانسیو کردن برای صفحات کوچک‌تر (Media Queries) */
/* ------------------------------------------- */

/* برای تبلت‌ها و لپ‌تاپ‌های کوچک (عرض کمتر از 992px) */
@media (max-width: 992px) {
    header h1 {
        font-size: 2.2em;
    }
    nav ul li {
        margin: 0 12px;
    }
    .hero-text h2 {
        font-size: 2.8em;
    }
    .hero-text p {
        font-size: 1.1em;
    }
    .slider-image img {
        height: 380px;
    }
    main {
        padding: 25px;
    }
    section h2 {
        font-size: 2em;
    }
    .about-us-section .about-content {
        flex-direction: column; /* تصویر بالای متن */
        align-items: center;
    }
    .about-us-section .about-image {
        max-width: 80%; /* تصویر در موبایل عرض بیشتری بگیرد */
        margin-bottom: 20px;
    }
    .company-details-box {
        width: 80%; /* عرض باکس اطلاعات در تبلت */
    }
    .certificate-item {
        width: calc(33.333% - 40px); /* 3 آیتم در هر سطر */
        max-width: 200px;
    }
    .certificate-item.wide-item {
        width: calc(66.666% - 40px); /* 2 آیتم در هر سطر برای پروانه کسب */
    }
    .service-card, .article-card, .product-card {
        flex: 1 1 calc(50% - 60px); /* دو کارت در هر سطر */
    }
    .why-item {
        flex: 1 1 calc(100% - 40px); /* یک آیتم در هر سطر */
        max-width: 450px;
    }
    .call-to-action-section h2 {
        font-size: 2.2em;
    }
    .page-hero-section h2 {
        font-size: 2.5em;
    }
    .page-hero-section p {
        font-size: 1.1em;
    }
    .service-detail-card {
        flex: 1 1 calc(50% - 80px); /* دو کارت در هر سطر */
    }
    .product-detail-modal {
        width: 90%; /* عرض مودال در تبلت */
        padding: 25px;
    }
    .product-detail-modal h3 {
        font-size: 2em;
    }
}

/* برای تبلت‌ها و موبایل‌های بزرگ (عرض کمتر از 768px) */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.8em;
    }
    nav ul {
        flex-direction: column; /* منو زیر هم */
        align-items: center;
        margin-top: 10px;
    }
    nav ul li {
        margin: 8px 0;
    }
    .hero-text h2 {
        font-size: 1.8em;
    }
    .hero-text p {
        font-size: 0.9em;
    }
    .btn-cta {
        padding: 10px 20px;
        font-size: 0.95em;
    }
    .slider-image img {
        height: 300px;
    }
    main {
        padding: 20px;
        margin: 20px auto;
    }
    section h2 {
        font-size: 1.8em;
    }
    .service-card, .article-card, .product-card {
        flex: 1 1 calc(100% - 40px); /* یک کارت در هر سطر */
        max-width: 350px;
    }
    .call-to-action-section h2 {
        font-size: 1.8em;
    }
    .call-to-action-section p {
        font-size: 1em;
    }
    .page-hero-section {
        padding: 40px 15px;
    }
    .page-hero-section h2 {
        font-size: 2em;
    }
    .page-hero-section p {
        font-size: 1em;
    }
    .service-detail-card {
        flex: 1 1 calc(100% - 60px); /* یک کارت در هر سطر */
        max-width: 350px;
    }
    .service-detail-card h3 {
        font-size: 1.6em;
    }
    .service-detail-card ul li {
        font-size: 0.85em;
        padding: 8px 12px;
    }
    .product-detail-modal {
        width: 95%; /* عرض مودال در موبایل */
        padding: 20px;
    }
    .product-detail-modal h3 {
        font-size: 1.8em;
    }
    .product-detail-modal p {
        font-size: 0.9em;
    }
    .product-detail-modal ul li {
        font-size: 0.9em;
    }
    .certificate-item, .certificate-item.wide-item {
        width: calc(50% - 20px); /* 2 آیتم در هر سطر */
        max-width: 200px;
    }
    .certificate-item.wide-item .certificate-image {
        max-width: 100px; /* تنظیم مجدد برای موبایل */
        height: 100px;
    }
}

/* برای موبایل‌های کوچک (عرض کمتر از 480px) */
@media (max-width: 480px) {
    .company-logo {
        max-width: 120px;
    }
    header h1 {
        font-size: 1.5em;
    }
    nav ul li {
        margin: 6px 0;
    }
    .hero-text {
        width: 90%;
        padding: 15px;
    }
    .hero-text h2 {
        font-size: 1.4em;
        margin-bottom: 10px;
    }
    .hero-text p {
        font-size: 0.8em;
        margin-bottom: 15px;
    }
    .btn-cta {
        padding: 8px 15px;
        font-size: 0.85em;
    }
    .slider-image img {
        height: 250px;
    }
    main {
        padding: 15px;
    }
    section h2 {
        font-size: 1.6em;
    }
    .about-us-section .about-image {
        max-width: 95%;
    }
    .service-card, .article-card, .product-card {
        padding: 20px;
    }
    .service-card h3, .article-card h3, .product-card h3 {
        font-size: 1.4em;
    }
    .call-to-action-section {
        padding: 30px 15px;
    }
    .call-to-action-section h2 {
        font-size: 1.6em;
    }
    .call-to-action-section p {
        font-size: 0.9em;
    }
    .page-hero-section h2 {
        font-size: 1.8em;
    }
    .page-hero-section p {
        font-size: 0.9em;
    }
    .service-detail-card {
        padding: 20px;
    }
    .service-detail-card h3 {
        font-size: 1.6em;
    }
    .service-detail-card ul li {
        font-size: 0.85em;
        padding: 8px 12px;
    }
    .certificate-item, .certificate-item.wide-item {
        width: calc(100% - 20px); /* 1 آیتم در هر سطر */
        max-width: 250px;
    }
}