@font-face {
    font-family: 'Yekan';
    src: url('fonts/Yekan.eot');
    src: url('fonts/Yekan.eot?#iefix') format('embedded-opentype'),
         url('fonts/Yekan.woff2') format('woff2'),
         url('fonts/Yekan.woff') format('woff'),
         url('fonts/Yekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* مهم برای کاهش CLS و LCP */
}


body {
    overflow-x: hidden;
    margin: 0;
    font-family: 'Yekan', sans-serif; /* <--- کل سایت از فونت Yekan استفاده می‌کند */
    direction: rtl;
    text-align: right;
    line-height: 1.2;
    color: #333;
}

/* --- اصلاح font-family فیلدهای فرم مشاوره (اگر قبلا IRANSans یا Titr بود) --- */
.consultation-form input[type="text"],
.consultation-form input[type="tel"],
.consultation-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Yekan', sans-serif; /* <--- اینجا هم به Yekan تغییر یافت */
    font-size: 0.95em;
    color: #333;
    box-sizing: border-box;
}



#header-placeholder {
    min-height: 80px;  
	}


.main-nav a,
.main-nav a:link,
.main-nav a:visited,
.main-nav a:hover,
.main-nav a:active {
    color: inherit; /* رنگ متن را از والد خود به ارث می برد */
    text-decoration: none; /* خط زیر را حذف می کند */
    font-weight: bold; /* یا هر ضخامت دیگری که قبلاً داشتید (مثلا 500 یا 700) */
    /* مهمترین تغییرات برای تراز عمودی: */
  
    vertical-align: middle; /* این خط کمک می‌کند تا تراز عمودی وسط باشد */
    line-height: normal; /* بازنشانی line-height برای جلوگیری از جابجایی */
    padding: 0; /* اگر پدینگ اضافی عمودی وجود دارد، آن را صفر کنید */
    margin: 0; /* اگر مارجین اضافی عمودی وجود دارد، آن را صفر کنید */
	align-items: center; 
}

/* هدر اصلی */
.main-header {
    background-color: #fff; /* پس‌زمینه سفید برای هدر */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* سایه ظریف برای برجسته‌سازی هدر */
    padding: 10px 0; /* پدینگ بالا و پایین هدر */
    position: relative; /* برای اینکه منوی موبایل روی آن قرار بگیرد */
    z-index: 100; /* برای اینکه هدر همیشه در بالا باشد */
}


.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* بخش چپ هدر (لوگو و عنوان) */
.header-left {
    display: flex;
    align-items: center;
}

/* استایل برای کانتینر جدید دو لوگو */
.header-logos {
    display: flex; /* لوگوها را کنار هم قرار می‌دهد */
    align-items: center; /* لوگوها را به صورت عمودی در مرکز تراز می‌کند */
    gap: 10px; /* فاصله بین دو لوگو (می‌توانید تنظیم کنید) */
}

/* اگر می‌خواهید لوگوی دوم کمی متفاوت باشد، می‌توانید اینجا استایل دهید */
.header-logos .second-logo img {
    /* مثلاً اگر می‌خواهید لوگوی دوم کمی کوچکتر باشد: */
    width: 80px; 
    height: auto; 
}

/* اگر لازم شد، می‌توانید استایل‌های کلی .logo را برای کنترل ابعاد هر دو لوگو در این حالت تنظیم کنید */
.header-left .logo img {
    max-height: 50px; /* حداکثر ارتفاع برای لوگوها (مثال) */
    width: auto; /* عرض را خودکار تنظیم می‌کند */
}

/* ریسپانسیو (اگر لازم بود) */
@media (max-width: 768px) {
    .header-logos {
        gap: 10px; /* فاصله کمتر در موبایل */
    }
    .header-left .logo img {
        max-height: 40px; /* ارتفاع کمتر لوگوها در موبایل */
    }
}

.site-title h1 {
    font-size: 1.5em;
    color: #0098b3; /* رنگ آبی فیروزه ای */
    margin: 0;
    font-weight: bold;
}

/* نوار ناوبری */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    position: relative;
    margin: 0 18px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: #0098b3; /* رنگ آبی فیروزه ای */
}

/* زیرمنو (Dropdown) - حالت پیش‌فرض (مخفی) */
.main-nav ul li .submenu {
    display: none !important;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    min-width: 180px;
    z-index: 1;
    right: 0;
    border-top: 3px solid #0098b3; /* رنگ آبی فیروزه ای */
    padding: 10px 0 !important;
}

/* --- Submenu (منوی کشویی - راهنما و مقالات) --- */
.submenu {
    position: absolute;
    top: 100%; /* زیر منوی اصلی قرار بگیرد */
    right: 0; /* به راست تراز شود */
    background-color: #fff;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    min-width: 200px; /* حداقل عرض برای زیرمنو */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* **سایه قوی‌تر و زیباتر** */
    border-radius: 8px; /* **گوشه‌های گرد برای زیرمنو** */
    opacity: 0; /* **به صورت پیش‌فرض نامرئی باشد** */
    visibility: hidden; /* **مخفی باشد تا فضای صفحه را اشغال نکند** */
    transform: translateY(10px); /* **کمی پایین‌تر از حالت نهایی شروع شود** */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 101; /* بالاتر از هدر باشد */
}

.has-submenu:hover > .submenu {
    opacity: 1; /* **هنگام هاور ظاهر شود** */
    visibility: visible; /* **قابل مشاهده شود** */
    transform: translateY(0); /* **به جایگاه نهایی خود برگردد** */
}

.submenu li a {
    color: #555;
    padding: 10px 20px; /* پدینگ داخل آیتم‌های زیرمنو */
    font-weight: normal;
    font-size: 0.95em;
    display: block;
    white-space: nowrap; /* جلوگیری از شکستن خط متن آیتم‌های زیرمنو */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.submenu li a:hover {
    background-color: #f0f0f0; /* پس‌زمینه هنگام هاور روی آیتم‌های زیرمنو */
    color: #0098b3; /* رنگ متن هنگام هاور */
}


/* نمایش زیرمنو هنگام هاور روی آیتم اصلی (فقط در دسکتاپ) */
.main-nav ul li.has-submenu:hover .submenu {
    display: block !important;
}

/* بخش راست هدر (شماره تماس) - تغییرات برای چینش دقیق‌تر */
.header-right {
    display: flex;
    align-items: center;
    gap: 5px; /* فاصله بین آیکون و شماره */
    background-color: #0098b3; /* رنگ آبی فیروزه ای */
    color: #fff;
    padding: 8px 15px;
    border-radius: 25px;
}

.phone-contact {
    display: flex; /* برای چینش آیکون و شماره در یک ردیف */
    align-items: center;
}

/* استایل دهی آیکون تلفن SVG */
.phone-icon-svg {
    height: 10px; /* ارتفاع آیکون */
    width: 10px; /* عرض آیکون */
    margin-left: 10px; /* فاصله از شماره تلفن */
    vertical-align: middle; /* تراز عمودی با متن */
    /* رنگ آیکون SVG را می‌توانید با color تنظیم کنید، چون از fill="currentColor" در SVG استفاده کردیم. */
    color: #fff; /* رنگ سفید، مطابق با پس‌زمینه آبی هدر */
    flex-shrink: 0; /* مطمئن می‌شویم که آیکون فشرده نمی‌شود */
}

.phone-number {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    white-space: nowrap;
}

/* --- بخش Hero (اصلاح شده برای ارتفاع ثابت 70vh) --- */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* تغییر اصلی: محتوا (hero-content) را از بالا تراز می‌کند */
    gap: 40px;
    padding: 50px 20px;
    height: 40vh; /* تغییر اصلی: ارتفاع ثابت 70% از viewport height */
    min-height: 500px; /* این را نگه می داریم تا در صفحات کوچکتر حداقل اندازه حفظ شود */
    position: relative; /* برای موقعیت‌دهی absolute اسلایدر و overlay و شمارنده‌ها */
    overflow: hidden; /* مهم: برای برش تصاویر اسلایدر که از کانتینر بیرون می‌زنند */
    color: white; /* رنگ متن کلی در هیرو */
}
/* --- Styles for Main Section Padding (if header is fixed/sticky) --- */
/* ----------------------------- */
/*   HERO SECTION (REWRITTEN)    */
/* ----------------------------- */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* ارتفاع کامل صفحه */
    overflow: hidden;
}

/* کانتینر اسلایدر */
.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* زیر محتوا */
    overflow: hidden;
}

/* هر اسلاید (حالا <img>) */
.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* جایگزین background-size: cover */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* اسلاید فعال */
.slider-image.active {
    opacity: 1;
}

/* لایه تیره روی عکس */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    );
    z-index: 2;
}

/* ----------------------------- */
/*          HERO CONTENT         */
/* ----------------------------- */

.hero-content {
    position: relative;
    z-index: 3; /* بالاتر از overlay */
    max-width: 600px;
    padding: 20px;
    margin-right: 80px;
    text-align: right;
    color: #fff;
}

.hero-title {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 1.8em;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 30px;
}

.hero-button {
    display: inline-block;
    background-color: #0098b3;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-button:hover {
    background-color: #01829d;
    transform: translateY(-3px);
}

.hero-button.secondary-button {
    background-color: #007bff;
    border: 1px solid #007bff;
}

.hero-button.secondary-button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}


/* --- استایل دهی فرم مشاوره در بخش هیرو (position: absolute) --- */
.consultation-form-box {
    position: absolute;
    z-index: 10; /* بالا نگه داشته شود */
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 380px;
    text-align: center;
    box-sizing: border-box;

    /* موقعیت‌دهی دقیق فرم با absolute */
    left: 80px; /* تغییر اصلی: فاصله از سمت چپ (برای نمایش در سمت چپ hero-content) */
    top: 40%; /* تغییر اصلی: از بالا 50% باشد */
    transform: translateY(-50%); /* تغییر اصلی: برای وسط چین کردن دقیق عمودی */
    right: auto; /* اطمینان حاصل شود که right به آن صدمه نمی‌زند */
}

.form-header-icon img {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
}

.form-title {
    font-size: 1.15em;
    color: #333;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-subtitle {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 20px;
}

.consultation-form {
    display: flex;
    flex-direction: column; /* فیلدها زیر هم قرار بگیرند */
    gap: 15px; /* فاصله بین فیلدها */
}

.consultation-form input[type="text"],
.consultation-form input[type="tel"],
.consultation-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Titr', sans-serif;
    font-size: 0.95em;
    color: #333;
    box-sizing: border-box;
}
.consultation-form select {
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E'); /* فلش سفارشی */
    background-repeat: no-repeat;
    background-position: left 10px center; /* موقعیت فلش در سمت چپ */
    cursor: pointer;
}

.consultation-form button[type="submit"] {
    background-color: #0098b3; /* رنگ آبی فیروزه ای */
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.consultation-form button[type="submit"]:hover {
    background-color: #01829d; /* کمی تیره‌تر برای هاور */
}


/* --- استایل دهی برای بخش شمارشگرهای Hero (اصلاح شده) --- */
.hero-stats-container {
    position: absolute; /* موقعیت مطلق نسبت به hero-section */
    bottom: 20px; /* تغییر اصلی: 20 پیکسل از پایین hero-section */
    left: 50%; /* 50% از سمت چپ (برای وسط چین افقی) */
    transform: translateX(-50%); /* برای وسط چین کردن دقیق افقی */
    z-index: 5; /* باید بالاتر از اسلایدر و overlay باشد */
    display: flex;
    justify-content: space-around;
    align-items: center; /* آیتم‌ها را در مرکز عمودی تراز می‌کند */
    width: 600px; /* عرض مشخص برای کانتینر آمار */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 15px 20px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-stat-item {
    /* اگر اینجا margin-bottom نیاز نیست، آن را 0 نگه دارید */
}


/* ریسپانسیو برای بخش Hero و فرم */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        height: auto; /* تغییر اصلی: در موبایل ارتفاع خودکار شود تا محتوا جا شود */
        padding: 40px 20px;
        text-align: center;
        justify-content: center;
        overflow: hidden; /* در موبایل همچنان hidden باشه تا محتوا بیرون نزنه */
        align-items: center; /* در موبایل همه چیز در مرکز عمودی قرار گیرد */
    }

    .hero-content {
        max-width: 100%; /* عرض کامل */
        margin-bottom: 30px; /* فاصله بین محتوا و فرم */
        text-align: center; /* تراز به مرکز در موبایل */
        padding: 0; /* پدینگ اضافی در موبایل حذف شود */
        margin-right: 0; /* در موبایل مارجین راست را حذف می‌کنیم */
    }

    .hero-title {
        font-size: 2.8em;
    }

    .hero-subtitle {
        font-size: 1.5em;
    }

    /* فرم در موبایل به صورت عادی در جریان سند قرار بگیرد */
    .consultation-form-box {
        position: relative; /* در موبایل به relative تغییر می‌دهیم تا با flex کار کند */
        width: 90%;
        max-width: 350px;
        margin: 0 auto; /* برای وسط چین کردن در موبایل */
        left: auto;
        top: auto;
        bottom: auto; /* مهم: bottom رو هم auto می‌کنیم تا در موبایل تداخل ایجاد نکنه */
        transform: none;
        margin-top: 20px;
    }

    .hero-stats-container {
        position: relative; /* در موبایل به relative تغییر می‌دهیم */
        left: auto;
        transform: none;
        bottom: auto; /* در موبایل bottom را هم auto می‌کنیم */
        width: 90%; /* عرض بیشتر در موبایل */
        margin: 0 auto; /* در وسط افقی قرار گیرد */
        flex-direction: column; /* در موبایل زیر هم قرار بگیرند */
        margin-top: 30px; /* فاصله از فرم بالا */
    }

    .hero-stat-item {
        margin-bottom: 10px; /* فاصله بین آیتم‌ها در حالت عمودی در موبایل */
    }
    .hero-stat-item:last-child {
        margin-bottom: 0; /* آخرین آیتم فاصله از پایین نداشته باشد */
    }
    .stat-label {
        font-size: 0.9em;
    }
    .stat-number {
        font-size: 2em;
    }
    .percentage-sign {
        font-size: 1.5em;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2em;
    }

    .hero-subtitle {
        font-size: 1.2em;
    }

    .hero-button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8em;
    }

    .hero-subtitle {
        font-size: 1em;
    }

    .consultation-form-box {
        padding: 20px 15px;
    }
}





/* استایل دهی فرم مشاوره - موقعیت‌دهی با absolute */
.consultation-form-box {
    position: absolute;
    z-index: 10;
	left:50%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 380px;
    text-align: center;
    box-sizing: border-box;

    /* موقعیت‌دهی دقیق فرم با absolute */
    left: 450px; /* این مقدار رو برای تنظیم دقیق‌تر از سمت چپ تغییر دادم (مثلاً 80px قبلی بود) */
    bottom: -80px; /* تغییر بسیار مهم: از top به bottom تغییر یافت و مقدار منفی دادم */
    /* top: 75%; و transform: translateY(-50%); حذف شدند چون از bottom استفاده می‌کنیم */
}

.form-header-icon img {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
}

.form-title {
    font-size: 1.15em;
    color: #333;
    margin-bottom: 8px;
    font-weight: bold;
}

.form-subtitle {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 20px;
}

.consultation-form {
    display: flex;
    flex-direction: column; /* فیلدها زیر هم قرار بگیرند */
    gap: 15px; /* فاصله بین فیلدها */
}

.consultation-form input[type="text"],
.consultation-form input[type="tel"],
.consultation-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Titr', sans-serif;
    font-size: 0.95em;
    color: #333;
    box-sizing: border-box;
}
.consultation-form select {
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E'); /* فلش سفارشی */
    background-repeat: no-repeat;
    background-position: left 10px center; /* موقعیت فلش در سمت چپ */
    cursor: pointer;
}

.consultation-form button[type="submit"] {
    background-color: #0098b3; /* رنگ آبی فیروزه ای */
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.consultation-form button[type="submit"]:hover {
    background-color: #01829d; /* کمی تیره‌تر برای هاور */
}

/* ریسپانسیو برای بخش Hero و فرم */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
        text-align: center;
        justify-content: center;
        overflow: hidden; /* در موبایل همچنان hidden باشه تا محتوا بیرون نزنه */
    }

    .hero-content {
        max-width: 100%; /* عرض کامل */
        margin-bottom: 30px; /* فاصله بین محتوا و فرم */
        text-align: center; /* تراز به مرکز در موبایل */
        padding: 0; /* پدینگ اضافی در موبایل حذف شود */
    }

    .hero-title {
        font-size: 2.8em;
    }

    .hero-subtitle {
        font-size: 1.5em;
    }

    /* فرم در موبایل به صورت عادی در جریان سند قرار بگیرد */
    .consultation-form-box {
        position: relative;
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        left: auto;
        top: auto;
        bottom: auto; /* مهم: bottom رو هم auto می‌کنیم تا در موبایل تداخل ایجاد نکنه */
        transform: none;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2em;
    }

    .hero-subtitle {
        font-size: 1.2em;
    }

    .hero-button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8em;
    }

    .hero-subtitle {
        font-size: 1em;
    }

    .consultation-form-box {
        padding: 20px 15px;
    }
}


/* --- بخش بلوک‌های موضوعی (بروزرسانی شده) --- */
.topic-blocks-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* یک پس‌زمینه روشن برای تمایز */
    text-align: center;
}

.topic-blocks-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
}

.topic-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 ستون هم‌اندازه */
    gap: 30px; /* فاصله بین مستطیل‌ها */
}

.topic-block {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px; /* پدینگ کمتر برای ارتفاع کمتر */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* محتوا رو پخش می‌کنه */
    text-decoration: none; /* خط زیر لینک رو حذف می‌کنه */
    color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 150px; /* ارتفاع ثابت برای مستطیل‌ها */
    position: relative; /* برای موقعیت‌دهی لوگو ورود به بخش */
    box-sizing: border-box; /* padding و border به width/height اضافه نشن */
}

.topic-block:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px); /* افکت کوچک هنگام هاور */
    border-color: #0098b3; /* تغییر رنگ بوردر هنگام هاور */
}

.block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 5px; /* فاصله کمتر از عنوان */
}

/* استایل دهی لوگوی اصلی SVG (از فایل img) */
.main-topic-img-icon {
    width: 50px; /* اندازه لوگوی اصلی SVG (کوچکتر شده) */
    height: 50px; /* اندازه لوگوی اصلی SVG (کوچکتر شده) */
    /* اگر آیکون SVG شما یک رنگ مشخص داشت، ممکن است نیاز به فیلتر داشته باشید */
    /* filter: brightness(0) saturate(100%) invert(43%) sepia(87%) saturate(573%) hue-rotate(156deg) brightness(97%) contrast(101%); */
    /* در غیر این صورت، اگر آیکون تک رنگ (سیاه/سفید) است و می‌خواهید رنگش تغییر کند، این فیلتر را استفاده کنید. */
    /* اگر آیکون شما رنگی است و می‌خواهید همان رنگ اصلی خودش نمایش داده شود، این خط را حذف کنید. */
}


.block-title {
    font-size: 1.1em; /* کمی کوچکتر شده */
    color: #333;
    margin: 0;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px; /* فاصله از پایین */
}

.topic-block .entry-icon {
    position: absolute; /* موقعیت مطلق برای آیکون ورود */
    bottom: 10px; /* فاصله از پایین (کمی کمتر شده) */
    left: 10px; /* فاصله از چپ (کمی کمتر شده) */
}

/* استایل دهی لوگوی ورود به بخش SVG (پیکان رو به چپ) */
.entry-arrow-svg-icon {
    width: 25px; /* اندازه آیکون ورود به بخش SVG (کوچکتر شده) */
    height: 25px; /* اندازه آیکون ورود به بخش SVG (کوچکتر شده) */
    color: #0098b3; /* رنگ آبی فیروزه‌ای برای آیکون ورود */
}


/* ریسپانسیو برای بلوک‌های موضوعی */
@media (max-width: 992px) {
    .topic-blocks-grid {
        grid-template-columns: repeat(2, 1fr); /* در تبلت 2 ستون */
        gap: 25px;
    }
    .topic-block {
        height: 140px; /* ارتفاع ثابت در تبلت */
        padding: 20px;
    }
    .main-topic-img-icon {
        width: 45px;
        height: 45px;
    }
    .block-title {
        font-size: 1em;
    }
    .entry-arrow-svg-icon {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .topic-blocks-grid {
        grid-template-columns: 1fr; /* در موبایل 1 ستون */
        gap: 20px;
    }
    .topic-block {
        height: auto; /* ارتفاع خودکار در موبایل */
        padding: 20px;
    }
    .main-topic-img-icon {
        width: 40px;
        height: 40px;
    }
    .block-title {
        font-size: 1em;
    }
    .entry-arrow-svg-icon {
        width: 20px;
        height: 20px;
    }
    .topic-block .entry-icon {
        bottom: 10px;
        left: 10px;
    }
}

/* --- بخش اطلاعات تماس و ساعات کاری --- */
.contact-info-section {
    padding: 50px 0;
    background-color: #f0f2f5;
    text-align: center;
}

.contact-info-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-row {
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* تغییر: برای هم‌اندازه شدن ارتفاع آیتم‌ها */
    gap: 30px;
    flex-wrap: wrap;
}

.contact-item {
    flex: 1;
    min-width: 250px;
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 140px; /* اضافه شده: ارتفاع ثابت برای هم‌اندازه شدن */
    box-sizing: border-box; /* برای محاسبه صحیح پدینگ */
}

/* استایل برای نام وکیل */
.lawyer-name {
    font-size: 1.04em; /* 30% بزرگتر از 0.8em قبلی (0.8 * 1.3 = 1.04) */
    font-weight: bold;
    color: #444;
    margin-bottom: 5px;
}

/* استایل برای عنوان وکیل */
.lawyer-title {
    font-size: 0.715em; /* 30% بزرگتر از 0.55em قبلی (0.55 * 1.3 = 0.715) */
    color: #777;
    margin-bottom: 0;
}

.icon-text-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px; /* کمی افزایش یافته برای فاصله بهتر */
}

.contact-icon {
    width: 26px; /* 30% بزرگتر از 20px قبلی (20 * 1.3 = 26) */
    height: 26px; /* 30% بزرگتر از 20px قبلی */
    color: #0098b3;
    margin-left: 10px; /* کمی افزایش یافته */
}

.contact-label {
    font-size: 0.91em; /* 30% بزرگتر از 0.7em قبلی (0.7 * 1.3 = 0.91) */
    font-weight: normal;
    color: #777;
}

.contact-value {
    font-size: 1.04em; /* 30% بزرگتر از 0.8em قبلی */
    font-weight: bold;
    color: #444;
    margin: 0;
}

/* استایل خاص برای شماره موبایل */
.phone-number {
    direction: ltr;
    text-align: center;
}

/* ریسپانسیو برای بخش اطلاعات تماس */
@media (max-width: 992px) {
    .contact-row {
        flex-direction: column;
        align-items: center;
    }
    .contact-item {
        margin-bottom: 25px;
        min-width: 80%;
        max-width: 400px;
        padding: 20px;
        height: auto; /* تغییر: ارتفاع در موبایل خودکار شود */
    }
    .lawyer-name {
        font-size: 1.0em; /* متناسب با تغییرات */
    }
    .lawyer-title {
        font-size: 0.65em; /* متناسب با تغییرات */
    }
    .contact-value {
        font-size: 1.0em; /* متناسب با تغییرات */
    }
    .contact-icon {
        width: 24px;
        height: 24px;
    }
    .contact-label {
        font-size: 0.85em;
    }
}

@media (max-width: 576px) {
    .contact-info-section {
        padding: 30px 0;
    }
    .contact-item {
        padding: 15px;
    }
    .lawyer-name {
        font-size: 0.9em;
    }
    .lawyer-title {
        font-size: 0.6em;
    }
    .contact-value {
        font-size: 0.9em;
    }
    .contact-icon {
        width: 20px;
        height: 20px;
    }
    .contact-label {
        font-size: 0.75em;
    }
}

/* --- بخش درباره ما --- */
.about-us-section {
    padding: 80px 0; /* پدینگ بیشتر برای فضای کافی */
    background-color: #2b323a; /* رنگ پس‌زمینه تیره جدید */
    color: #fff; /* رنگ متن پیش‌فرض سفید برای این بخش */
    text-align: center;
}

.about-us-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-us-content {
    display: flex; /* برای چیدمان عکس و متن کنار هم */
    flex-direction: row-reverse; /* تغییر: محتوا رو برعکس می‌کنه تا متن راست و عکس چپ باشه */
    gap: 40px; /* فاصله بین بخش عکس و متن */
    align-items: flex-start; /* تراز از بالا */
    padding-top: 20px; /* اضافه شده: فاصله از سقف بخش */
}

.about-us-image-slider {
    flex: 0 0 350px; /* عرض ثابت برای بخش عکس */
    position: relative; /* برای موقعیت‌دهی دات‌ها و عکس‌ها */
    background-color: #e0e0e0; /* قاب خاکستری روشن */
    padding: 10px; /* پدینگ داخل قاب */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* برای مخفی کردن عکس‌های خارج از قاب */
    height: 400px; /* ارتفاع ثابت برای کادر عکس */
    display: flex; /* برای وسط قرار دادن عکس‌ها و دات‌ها */
    flex-direction: column;
    justify-content: center;
	margin-top: 220px;
	
}

.slider-container {
    position: relative;
    width: 100%;
    height: calc(100% - 30px); /* ارتفاع کانتینر عکس منهای فضای دات‌ها */
    overflow: hidden;
    border-radius: 5px;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* عکس‌ها داخل کادر جا بشن و بریده نشن */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* عکس‌ها نامرئی تا جاوااسکریپت کنترل کنه */
    transition: opacity 0.5s ease-in-out; /* افکت محو شدن */
}

.slider-image.active {
    opacity: 1; /* عکس فعال قابل مشاهده باشد */
}

.slider-nav {
    position: absolute;
    bottom: 1px; /* موقعیت دات‌ها در پایین کادر عکس */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    z-index: 10;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.dot.active {
    background-color: #f0f2f5; /* رنگ دات فعال */
}


.about-us-text-content {
    flex: 1; /* فضای باقی‌مانده رو اشغال کنه */
    color: #e0e0e0; /* رنگ متن اصلی خاکستری روشن */
    text-align: right; /* متن راست‌چین شود */
    padding-bottom: 0; /* حذف پدینگ پایین */
}

.about-us-title {
    font-size: 2.5em; /* تیتر بزرگتر */
    color: #fff; /* رنگ تیتر سفید */
    margin-bottom: 25px;
    font-weight: bold;
    text-align: right; /* تیتر راست‌چین شود */
}

.about-us-description {
    font-size: 1.1em;
    line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
    text-align: justify; /* متن justify شود */
    margin-bottom: 30px; /* فاصله از بخش تماس پایانی */
    color: #e0e0e0; /* خاکستری روشن برای متن */
}

.about-us-contact {
    display: flex; /* برای قرار گرفتن آیکون و contact-details در یک ردیف */
    align-items: center; /* تراز عمودی آیتم‌ها در مرکز */
    justify-content: center; /* وسط‌چین کردن افقی کل گروه */
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #f0f2f5;
}

.about-us-contact .contact-icon {
    width: 28px;
    height: 28px;
    color: #0098b3;
    margin-left: 10px; /* فاصله از contact-details */
    margin-bottom: 0;
}

.about-us-contact .contact-details {
    display: flex;
    flex-direction: column; /* محتوای داخلش (نام و شماره) زیر هم باشن */
    align-items: flex-end; /* راست‌چین کردن نام و شماره */
    margin: 0; /* حذف مارجین‌های پیش‌فرض */
}

.about-us-contact .lawyer-name {
    font-size: 18px; /* اینجا رو امتحان کنید */
    font-weight: bold;
    color: #f0f2f5;
    margin: 0;
    padding: 0;
    line-height: 1; /* اطمینان از عدم جابجایی عمودی */
    white-space: nowrap;
}

.about-us-contact .phone-number {
    font-size: 18px; /* اینجا هم همین اندازه رو تنظیم کنید */
    color: #bbb;
    direction: ltr;
    margin: 0;
    padding: 0;
    line-height: 1; /* اطمینان از عدم جابجایی عمودی */
    white-space: nowrap;
}


/* ریسپانسیو برای بخش درباره ما */
@media (max-width: 992px) {
    .about-us-content {
        flex-direction: column; /* در تبلت و موبایل روی هم قرار بگیرند */
        align-items: center;
        gap: 30px;
        padding-top: 0; /* حذف پدینگ بالا در موبایل */
    }
    .about-us-image-slider {
        flex: 0 0 auto; /* عرض خودکار */
        width: 100%; /* تمام عرض */
        max-width: 450px; /* حداکثر عرض در تبلت */
        height: 350px; /* ارتفاع کمتر در تبلت */
    }
    .about-us-text-content {
        text-align: center; /* متن در موبایل وسط‌چین شود */
    }
    .about-us-title {
        text-align: center; /* تیتر در موبایل وسط‌چین شود */
        font-size: 2em;
    }
    .about-us-description {
        font-size: 1em;
    }
    .about-us-contact {
        justify-content: center; /* اطلاعات تماس نهایی وسط‌چین شود */
        flex-wrap: wrap; /* در صورت نیاز به خط بعدی برود */
        margin-top: 30px;
        padding-top: 15px;
    }
    .about-us-contact .contact-icon {
        margin-left: 10px; /* فاصله از متن در موبایل */
    }
    .about-us-contact .contact-details {
        align-items: center; /* در موبایل وسط‌چین شوند */
    }
    .about-us-contact .lawyer-name,
    .about-us-contact .phone-number {
        margin-left: 0; /* حذف مارجین چپ و راست */
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .about-us-section {
        padding: 40px 0;
    }
    .about-us-image-slider {
        height: 280px; /* ارتفاع کمتر در موبایل */
        padding: 8px;
    }
    .about-us-title {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .about-us-description {
        font-size: 0.9em;
        line-height: 1.7;
    }
    .about-us-contact .contact-icon {
        width: 24px;
        height: 24px;
    }
    .about-us-contact .lawyer-name {
        font-size: 1.1em;
    }
    .about-us-contact .phone-number {
        font-size: 0.9em;
    }
    /* برای موبایل کوچک‌تر، آیتم‌ها در یک ردیف باقی می‌مانند (به خاطر flex-wrap) */
    /* اگر فضای کافی نباشد، به خط بعدی می‌روند */
    .about-us-contact {
        flex-direction: row; /* برگرداندن به ردیف برای این حالت */
        flex-wrap: wrap; /* مهم برای شکستن به خطوط جدید */
        justify-content: center;
        align-items: center;
    }
    .about-us-contact .contact-icon,
    .about-us-contact .contact-details {
        margin: 5px; /* کمی فاصله */
    }
}
/* --- بخش نظرات کاربران (Comments Section) --- */
.comments-section {
    background-color: #f7f7f7; /* زمینه خاکستری روشن */
    padding: 60px 0;
    text-align: center;
}

.comments-section .section-title {
    color: #333;
    margin-bottom: 20px;
}

.comment-form-container {
    max-width: 700px;
    margin: 0 auto 50px auto; /* فاصله از بخش نظرات قبلی */
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: right; /* متن داخل فرم به راست چین شود */
}

.comment-form-container .form-instruction {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
}

.comment-form input[type="text"],
.comment-form input[type="tel"],
.comment-form textarea {
    width: calc(100% - 20px); /* عرض کامل با در نظر گرفتن پدینگ */
    padding: 12px 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Titr', sans-serif;
    font-size: 1em;
    box-sizing: border-box; /* برای جلوگیری از افزایش عرض با پدینگ */
}

.comment-form textarea {
    resize: vertical; /* فقط امکان تغییر اندازه عمودی */
}

.comment-form .form-actions {
    display: flex;
    justify-content: flex-end; /* دکمه‌ها در سمت راست قرار گیرند */
    gap: 15px; /* فاصله بین دکمه‌ها */
    margin-top: 20px;
}

.comment-form button {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Titr', sans-serif;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.submit-comment-button {
    background-color: #007bff; /* رنگ آبی */
    color: white;
}

.submit-comment-button:hover {
    background-color: #0056b3;
}

.cancel-comment-button {
    background-color: #6c757d; /* رنگ خاکستری */
    color: white;
}

.cancel-comment-button:hover {
    background-color: #5a6268;
}

/* --- بخش نمایش نظرات قبلی --- */
.past-comments {
    margin-top: 50px;
    /* این خطوط را اضافه یا اصلاح کنید برای وسط چین کردن گرید */
    display: flex; /* اضافه شد */
    flex-direction: column; /* اضافه شد */
    align-items: center; /* برای وسط چین کردن گرید در افقی */
}

.comments-list-title {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
    width: 100%; /* مطمئن شوید که این عنوان تمام عرض را می‌گیرد */
}

.comments-grid {
    /* تغییرات اصلی در اینجا انجام می‌شود: */
    display: grid;
    /* این خط را به طور دقیق تنظیم کنید برای 3 ستون ثابت */
    grid-template-columns: repeat(3, 1fr); /* دقیقا 3 ستون با عرض مساوی */
    gap: 30px; /* فاصله بین کادرها */
    /* برای مرکز قرار گرفتن کل گرید در وسط صفحه */
    max-width: 1000px; /* یک حداکثر عرض برای گرید (قابل تنظیم) */
    width: 100%; /* مطمئن شوید که در عرض های کوچکتر هم تمام عرض را می گیرد */
}

.comment-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px; /* حداقل ارتفاع برای یکدست شدن کارت‌ها */
}
.comment-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1; /* اجازه رشد به متن برای پر کردن فضای خالی */
}

.comment-author {
    display: flex;
    align-items: center;
    margin-top: auto; /* چسباندن به پایین کارت */
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* دایره‌ای کردن عکس */
    overflow: hidden;
    margin-left: 15px; /* فاصله از نام کاربر */
    flex-shrink: 0; /* جلوگیری از کوچک شدن آواتار */
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تصویر را کامل پوشش دهد */
}

.author-details {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.author-name {
    font-weight: bold;
    color: #333;
    font-size: 1.05em;
    margin-bottom: 3px;
}

.author-role {
    font-size: 0.85em;
    color: #666; /* رنگ روشن‌تر برای 'موکل' */
}

/* --- ریسپانسیو کردن بخش نظرات --- */
@media (max-width: 992px) {
    .comments-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 ستون در تبلت */
        max-width: 700px; /* تنظیم حداکثر عرض برای 2 ستون */
    }
}

@media (max-width: 768px) {
    .comments-section {
        padding: 40px 0;
    }
    .comment-form-container {
        padding: 20px;
    }
    .comments-grid {
        grid-template-columns: 1fr; /* 1 ستون در موبایل */
        gap: 20px;
        max-width: 400px; /* تنظیم حداکثر عرض برای 1 ستون */
    }
    .comment-card {
        min-height: auto;
    }
    .comment-form .form-actions {
        flex-direction: column;
        gap: 10px;
    }
    .comment-form button {
        width: 100%;
    }
}

/* --- بخش تماس با ما (Contact Us Section) --- */
.contact-us-section {
    background-color: #f7f7f7;
    padding: 60px 0;
    text-align: center;
}

.contact-us-section .section-title {
    color: #333;
    margin-bottom: 20px;
}

.contact-instruction {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 10px;
}

.contact-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* اجازه می‌دهد در صفحات کوچک‌تر زیر هم قرار بگیرند */
    justify-content: center; /* **کادرهای اصلی (contact-info و map-container) را در مرکز افقی قرار می‌دهد.** */
    gap: 40px; /* فاصله بین دو ستون (اطلاعات تماس و نقشه) */
    margin-top: 50px;
    direction: rtl; /* برای نمایش راست به چپ */
    /* **تنظیم حداکثر عرض برای کنترل کلی طول کادرها و وسط چین شدن آنها.** */
    /* این عرض باید به اندازه کافی بزرگ باشد تا دو کادر با min-width خود و gap، در آن جا شوند. */
    max-width: 1150px; /* افزایش دادم تا فضای بیشتری برای کادرها باشد و آدرس در یک خط جای گیرد (مطابق فتوشاپ). */
    margin-left: auto; /* برای وسط چین شدن در افقی */
    margin-right: auto; /* برای وسط چین شدن در افقی */
}

.contact-info,
.map-container {
    flex: 1 1 100%;
    min-width: 0;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    box-sizing: border-box; /* اطمینان از محاسبه درست ابعاد شامل padding */
}

.contact-info {
    text-align: right;
    display: flex;
    flex-direction: column; /* آیتم‌های داخلی زیر هم قرار می‌گیرند */
    justify-content: flex-start; /* محتوای داخل کادر از بالا شروع شود */

}

.contact-item {
    display: flex; /* **مهم: هر خط تماس (آیکون + متن) خودش یک ردیف Flex است** */
    align-items: center; /* **آیکون و متن را در مرکز عمودی آیتم قرار می‌دهد** */
    margin-bottom: 8px; /* **کاهش مارجین پایین برای کم کردن ارتفاع کلی آیتم‌ها** */
    font-size: 1.05em;
    color: #333;
    padding: 0;
    /* line-height را از اینجا حذف می‌کنیم تا فقط روی span اعمال شود و تداخلی ایجاد نکند. */
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-icon-png {
    width: 28px;
    height: 28px;
    margin-right: 0; /* اطمینان از عدم وجود مارجین راست */
    margin-left: 15px; /* **فاصله آیکون از متن (آیکون راست، متن چپ)** */
    flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
    object-fit: contain; /* حفظ نسبت ابعاد تصویر */
    /* vertical-align: middle; // در Flexbox نیازی نیست و حتی ممکن است تداخل ایجاد کند */
}

.contact-item span {
    /* **مهمترین بخش برای کنترل متن در کنار آیکون و رفع مشکل تراز:** */
    display: inline-block; /* ضروری برای اعمال vertical-align و flex-grow */
    flex-grow: 1; /* به متن اجازه می‌دهد تمام فضای باقی‌مانده را پر کند */
    vertical-align: middle; /* **مهم: تراز عمودی دقیق متن با آیکون** */
    line-height: 1; /* **کنترل دقیق خطوط متن، مستقل از body line-height** */
    white-space: normal; /* **مطمئن شوید که خطوط در صورت لزوم شکسته می‌شوند (پیش‌فرض).** */
   
}

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

/* --- ریسپانسیو کردن بخش تماس با ما --- */
@media (max-width: 1150px) { /* این بریک‌پوینت را برابر با max-width کانتینر اصلی تنظیم می‌کنیم */
    .contact-content-wrapper {
        max-width: 90%; /* انعطاف‌پذیری بیشتر در عرض‌های کوچک‌تر */
        gap: 30px;
    }
    .contact-info,
    .map-container {
        /* در این عرض، اگر 50% جواب نمی‌دهد، به 100% برویم تا زیر هم قرار گیرند */
        flex-basis: 100%; /* **هر کدام 100% عرض والد را بگیرند (زیر هم قرار می‌گیرند)** */
        min-width: unset; /* حذف حداقل عرض برای حالت تک ستونه */
    }
}

@media (max-width: 768px) { /* موبایل */
    .contact-content-wrapper {
        max-width: 95%; /* برای موبایل کمی بیشتر فضا می‌دهیم */
        gap: 20px;
    }
    .contact-item {
        font-size: 1em;
        margin-bottom: 6px;
    }
    .contact-icon-png {
        width: 24px;
        height: 24px;
        margin-left: 10px;
    }
    .contact-item span {
        line-height: 1.2; /* کمی فشرده‌تر برای موبایل */
    }
    .map-container iframe {
        height: 300px; /* ارتفاع نقشه در موبایل */
    }
}


/* --- Footer Styles --- */
footer {
    background-color: #000; /* رنگ پس‌زمینه مشکی */
    color: #fff; /* رنگ متن سفید */
    text-align: center; /* تراز کردن متن در مرکز */
    padding: 20px 0; /* فاصله داخلی بالا و پایین */
    margin-top: 50px; /* فاصله از بخش بالایی (اختیاری، اگر نیاز به فاصله بیشتر بود) */
    width: 100%; /* عرض کامل */
}

.footer-text {
    font-size: 1rem; /* اندازه فونت متن فوتر */
    line-height: 1.5; /* ارتفاع خط برای خوانایی بهتر */
    margin: 0; /* حذف مارجین‌های پیش‌فرض پاراگراف */
}

/* در صورت نیاز به ریسپانسیو کردن فوتر */
@media (max-width: 768px) {
    footer {
        padding: 15px 0; /* کاهش پدینگ در صفحات کوچک‌تر */
    }
    .footer-text {
        font-size: 0.8rem; /* کاهش اندازه فونت در صفحات کوچک‌تر */
    }
}

/* --- بخش روند پذیرش پرونده (فلوچارت) --- */
.flowchart-section {
    padding: 20px 20px; /* پدینگ کلی بخش */
    text-align: center;
    background-color: #dbdbdb; /* رنگ پس زمینه ملایم */
    min-height: 30vh; /* تغییر اصلی: حدود 50 درصد از ارتفاع صفحه بعد از هدر */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* تغییر اصلی: محتوا از بالا شروع شود */
    box-sizing: border-box; /* اطمینان از اینکه پدینگ در عرض محاسبه شود */
}

.flowchart-title {
    font-size: 2.5em;
    color: #0098b3;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.flowchart-container {
    display: flex;
    flex-wrap: wrap; /* برای اینکه مراحل در صفحات کوچک به خط بعدی بروند */
    justify-content: center;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}

.flowchart-step {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 25px 20px;
    margin: 15px; /* فاصله بین مراحل */
    width: calc(33% - 30px); /* 3 آیتم در هر ردیف (33.33% - margin) */
    min-width: 180px; /* حداقل عرض برای هر مستطیل */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* برای فلش ها و محتوای گسترش یابنده */
    overflow: hidden; /* برای مخفی کردن محتوای اضافه */
}

.flowchart-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: #0098b3;
}

.step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.step-icon {
    width: 40px; /* اندازه آیکون */
    height: 40px;
    margin-bottom: 15px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.1));
}

.step-title {
    font-size: 1.4em;
    color: #333;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
}

.step-content {
    max-height: 0; /* در ابتدا مخفی */
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
    text-align: justify; /* متن پاراگراف توجیه شود */
    padding-top: 0; /* در ابتدا پدینگ از بالا ندارد */
    color: #666;
    font-size: 0.95em;
    line-height: 1.6;
}

.flowchart-step.active .step-content {
    max-height: 200px; /* یا یک مقدار بزرگتر که متن در آن جا شود */
    opacity: 1;
    padding-top: 15px; /* پدینگ از بالا وقتی باز شد */
}

/* --- تنظیمات ریسپانسیو برای هدر در موبایل --- */
@media (max-width: 768px) { /* این Media Query برای صفحاتی با عرض حداکثر 768 پیکسل (موبایل و تبلت‌های کوچک) اعمال می‌شود */
    .main-header {
        padding: 10px 15px; /* کاهش پدینگ کلی هدر برای فضای بیشتر */
        height: auto; /* اجازه می‌دهد ارتفاع هدر بر اساس محتوا تنظیم شود */
        flex-wrap: wrap; /* اگر main-header فلکس است، آیتم‌ها را در خط جدید بیاورد */
        justify-content: center; /* محتوای هدر را در مرکز قرار دهد */
    }

    .header-inner {
        flex-direction: column; /* المان‌های داخلی هدر (لوگو، ناوبری، شماره تلفن) را به صورت عمودی روی هم قرار می‌دهد */
        align-items: center; /* محتوای داخل header-inner را در مرکز افقی قرار می‌دهد */
        width: 100%; /* مطمئن شوید که 100% عرض موجود را اشغال می‌کند */
        padding: 0; /* حذف پدینگ داخلی اگر وجود دارد */
    }

    .header-left,
    .header-right,
    .main-nav {
        width: 100%; /* هر بخش (لوگو، ناوبری، تلفن) 100% عرض را اشغال کند */
        text-align: center; /* متن و محتوای داخلی را در مرکز قرار می‌دهد */
        margin-bottom: 15px; /* فاصله بین المان‌های روی هم قرار گرفته */
    }

    /* تنظیم اندازه لوگوها در موبایل */
    .header-logos {
        justify-content: center; /* اگر لوگوها هم فلکس هستند، آن‌ها را وسط چین کند */
    }
    .logo img {
        max-width: 70px; /* کاهش اندازه لوگوها برای موبایل */
        height: auto;
    }
    .logo.second-logo { /* اگر لوگوی دوم در موبایل نیاز نیست یا باید متفاوت باشد */
        display: none; /* مثال: لوگوی دوم را در موبایل پنهان می‌کند */
    }

    /* تنظیم ناوبری (منو) در موبایل */
    .main-nav ul {
        flex-direction: column; /* آیتم‌های لیست منو را به صورت عمودی روی هم قرار می‌دهد */
        padding: 0; /* حذف پدینگ لیست */
        list-style: none; /* حذف نشانگرهای لیست */
    }
    .main-nav ul li {
        margin: 5px 0; /* فاصله بین آیتم‌های منو که روی هم قرار گرفته‌اند */
        display: block; /* اطمینان از اینکه هر آیتم منو یک بلوک کامل را اشغال کند */
        border-bottom: 1px solid #eee; /* یک خط جداکننده نازک بین آیتم‌های منو */
        padding-bottom: 5px;
    }
    .main-nav ul li:last-child {
        border-bottom: none; /* خط جداکننده را از آیتم آخر حذف می‌کند */
    }
    .main-nav a {
        font-size: 1.1em; /* کاهش اندازه فونت لینک‌های منو */
        padding: 8px 0; /* کاهش پدینگ لینک‌های منو */
        display: block; /* اطمینان از اینکه لینک تمام عرض آیتم لیست را اشغال کند */
    }

    /* تنظیم بخش تماس تلفنی در موبایل */
    .phone-contact {
        flex-direction: row; /* آیکون تلفن و شماره در یک خط بمانند */
        justify-content: center; /* آن‌ها را در مرکز قرار می‌دهد */
        font-size: 1.1em; /* کاهش اندازه فونت شماره تلفن */
    }
    .phone-contact img {
        width: 24px; /* کاهش اندازه آیکون تلفن */
        height: 24px;
        margin-left: 8px; /* تنظیم فاصله بین آیکون و شماره */
    }
}

/* اگر هدر شما در دسکتاپ از flexbox استفاده نمی‌کند، ممکن است نیاز به اضافه کردن این باشید: */
/* .main-header .header-inner {
    display: flex;
    justify-content: space-between; // یا center، flex-start، flex-end بسته به نیاز شما
    align-items: center;
} */

/* --- بخش سوالات متداول (FAQ) --- */
.faq-section {
    background-color: #f8f8f8; /* زمینه خاکستری روشن */
    padding: 20px 50px; /* پدینگ کلی بخش */
    text-align: right;
}

.faq-title {
    font-size: 2.9em; /* **کوچک‌تر شدن فونت تایتل (قبلاً 2.5em بود)** */
    color: #0098b3;
    margin-bottom: 40px; /* **کاهش margin-bottom برای بالاتر رفتن (قبلاً 50px بود)** */
    font-weight: 800; /* **ظریف‌تر شدن (متوسط) - می توانید 400 هم بگذارید برای ظرافت بیشتر** */
    text-shadow: none; /* **حذف سایه برای ظرافت بیشتر** */
}

.faq-container {
    max-width: 900px; /* **همانند عرض کانتینرهای دیگر سایت** */
    margin: 0 auto; /* وسط‌چین کردن */
    text-align: right; /* تراز بندی متن به راست برای RTL */
}

.faq-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px; /* **کمی کمتر گرد کردن لبه‌ها برای ظرافت بیشتر** */
    margin-bottom: 12px; /* **فاصله کمتر بین آیتم‌ها برای فشرده‌تر شدن** */
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06); /* **سایه ظریف‌تر و ملایم‌تر** */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    transform: translateY(-2px); /* **کمی کمتر حرکت به سمت بالا** */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* **سایه کمی عمیق‌تر هنگام هاور** */
}

.faq-question {
    display: flex;
    align-items: right;
    padding: 16px 20px; /* **کاهش پدینگ برای فشرده‌تر شدن** */
    cursor: pointer;
    background-color: #fdfdfd;
    color: #333;
    font-size: 1.1em; /* **کمی کوچک‌تر (قبلاً 1.2em)** */
    font-weight: 500; /* **ظریف‌تر (متوسط)** */
    transition: background-color 0.3s ease;
    user-select: none;
    line-height: 1.5; /* **تنظیم line-height برای خوانایی بهتر** */
}

.faq-question:hover {
    background-color: #f5f5f5;
}

.faq-number {
    font-size: 1em; /* **کمی کوچک‌تر (قبلاً 1.1em)** */
    color: #0098b3;
    margin-left: 10px; /* **کمی کمتر فاصله از متن** */
    font-weight: 600; /* **شماره‌ها کمی پررنگ‌تر باشند تا خوانا باشند** */
    flex-shrink: 0;
    min-width: 25px; /* **کاهش min-width برای اعداد تک رقمی و دو رقمی (فضای کافی)** */
    text-align: left;
}

.faq-question h3 {
    margin: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    color: #444;
    font-size: 1em; /* **کمی کوچک‌تر (قبلاً 1.1em)** */
    font-weight: 500; /* **ظریف‌تر (متوسط)** */
}

.faq-icon {
    width: 20px; /* **کمی کوچک‌تر** */
    height: 20px; /* **کمی کوچک‌تر** */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0098b3;
    font-size: 1.6em; /* **کمی کوچک‌تر** */
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
    margin-right: 8px; /* **کمی کمتر فاصله** */
    flex-shrink: 0;
}

.faq-icon::before {
    content: '+';
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: #dc3545;
}
.faq-item.active .faq-icon::before {
    content: '-';
    transform: rotate(0deg);
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    padding: 0 20px; /* **کاهش پدینگ** */
    background-color: #fafafa;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, padding 0.5s ease-out; /* **زمان انیمیشن کمی کمتر برای سرعت بیشتر** */
    box-sizing: border-box;
}

.faq-answer p {
    margin: 0;
    padding-top: 12px; /* **کاهش پدینگ** */
    padding-bottom: 18px; /* **کاهش پدینگ** */
    color: #666;
    font-size: 0.9em; /* **کمی کوچک‌تر** */
    line-height: 1.6; /* **کاهش line-height برای فشرده‌تر شدن متن پاسخ** */
    font-weight: 400; /* **فونت نرمال** */
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    padding-top: 15px; /* **پدینگ بعد از باز شدن** */
    padding-bottom: 20px; /* **پدینگ بعد از باز شدن** */
}

/* ریسپانسیو برای FAQ */
@media (max-width: 768px) {
    .faq-section {
        padding: 30px 10px; /* **پدینگ کمتر برای موبایل** */
    }
    .faq-title {
        font-size: 1.8em; /* **کوچک‌تر در موبایل** */
        margin-bottom: 20px;
    }
    .faq-question {
        font-size: 1em; /* **کمی کوچک‌تر در موبایل** */
        padding: 12px 15px; /* **پدینگ کمتر برای موبایل** */
    }
    .faq-question h3 {
        font-size: 0.95em; /* **کمی کوچک‌تر در موبایل** */
    }
    .faq-answer {
        padding: 0 15px; /* **پدینگ کمتر در موبایل** */
    }
    .faq-answer p {
        font-size: 0.85em; /* **کمی کوچک‌تر در موبایل** */
        padding-top: 10px;
        padding-bottom: 12px;
    }
    .faq-number {
        margin-left: 8px;
        min-width: 22px; /* **حداقل عرض کمتر برای موبایل** */
    }
    .faq-icon {
        width: 18px;
        height: 18px;
        font-size: 1.4em;
        margin-right: 5px;
    }
}

/* --- Styles for Cost Explanation Section --- */
.cost-explanation-section {
    padding: 60px 0; /* پدینگ بالا و پایین بیشتر برای فاصله از بالا و پایین صفحه */
    background-color: #f8f8f8; /* یک پس‌زمینه کمی متفاوت برای برجسته شدن این بلاک */
    text-align: right; /* تراز متن به راست برای کل بخش */
}

.cost-explanation-container {
    max-width: 900px; /* **عرض این کانتینر را محدود می‌کند** */
    margin: 0 auto; /* **وسط‌چین می‌کند** */
    padding: 40px; /* **پدینگ داخلی برای ایجاد فضای خالی از لبه‌های کانتینر** */
    background-color: #fff; /* **پس‌زمینه سفید برای خود بلاک توضیحات** */
    border-radius: 12px; /* **گوشه‌های گرد برای ظاهری مدرن‌تر** */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* **سایه ملایم برای برجسته‌سازی بلاک** */
    line-height: 1.8; /* فاصله خطوط برای خوانایی بهتر */
    color: #333; /* رنگ متن اصلی */
}

.cost-explanation-container h2 {
    font-size: 2.5em; /* اندازه بزرگتر برای عنوان اصلی بخش */
    color: #0098b3;
    margin-bottom: 35px; /* فاصله از پاراگراف زیرین */
    text-align: center; /* عنوان بخش وسط‌چین باشد */
    font-weight: 700; /* پررنگ‌تر */
    padding-bottom: 10px; /* پدینگ از پایین برای خط جداکننده */
    border-bottom: 2px solid #eee; /* خط جداکننده زیر عنوان */
}

.cost-explanation-container h3 {
    font-size: 1.8em; /* اندازه بزرگتر برای زیرعنوان‌ها */
    color: #007b8e;
    margin-top: 45px; /* فاصله از متن بالایی */
    margin-bottom: 20px; /* فاصله از پاراگراف یا لیست زیرین */
    border-right: 4px solid #0098b3; /* خط آبی در سمت راست زیرعنوان */
    padding-right: 15px; /* پدینگ برای متن زیرعنوان از خط */
    font-weight: 600;
}

.cost-explanation-container p {
    margin-bottom: 20px; /* فاصله بین پاراگراف‌ها */
    font-size: 1.1em; /* اندازه متن پاراگراف */
}

.cost-explanation-container ul {
    list-style: none; /* حذف بولت پیش‌فرض */
    padding-right: 0; /* حذف پدینگ پیش‌فرض لیست */
    margin-bottom: 25px;
}

.cost-explanation-container ul li {
    position: relative;
    margin-bottom: 12px; /* فاصله بین آیتم‌های لیست */
    font-size: 1.05em;
    padding-right: 25px; /* پدینگ برای متن از بولت سفارشی */
}

.cost-explanation-container ul li::before {
    content: "\2713"; /* آیکون تیک به جای بولت */
    font-family: "Font Awesome 5 Free"; /* اگر از Font Awesome استفاده می‌کنید */
    font-weight: 900; /* برای نمایش آیکون solid */
    color: #28a745; /* رنگ سبز برای آیکون تیک */
    position: absolute;
    right: 0; /* موقعیت آیکون */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
}

/* ریسپانسیو برای بخش توضیحات هزینه ها */
@media (max-width: 992px) {
    .cost-explanation-container {
        padding: 30px; /* پدینگ کمتر در تبلت */
    }
    .cost-explanation-container h2 {
        font-size: 2em;
        margin-bottom: 25px;
    }
    .cost-explanation-container h3 {
        font-size: 1.5em;
        margin-top: 35px;
        margin-bottom: 15px;
    }
    .cost-explanation-container p {
        font-size: 1em;
    }
    .cost-explanation-container ul li {
        font-size: 0.95em;
        padding-right: 20px;
    }
    .cost-explanation-container ul li::before {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .cost-explanation-section {
        padding: 40px 0; /* پدینگ کلی کمتر در موبایل */
    }
    .cost-explanation-container {
        padding: 20px; /* پدینگ کمتر در موبایل */
        border-radius: 8px; /* گردی کمتر گوشه‌ها */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه کمتر */
        max-width: 95%; /* کمی عرض بیشتر برای پر کردن صفحه موبایل */
    }
    .cost-explanation-container h2 {
        font-size: 1.7em;
        margin-bottom: 20px;
    }
    .cost-explanation-container h3 {
        font-size: 1.3em;
        margin-top: 25px;
        margin-bottom: 10px;
        padding-right: 10px;
        border-right-width: 3px;
    }
    .cost-explanation-container p {
        font-size: 0.95em;
        margin-bottom: 15px;
    }
    .cost-explanation-container ul li {
        font-size: 0.9em;
        margin-bottom: 8px;
        padding-right: 18px;
    }
    .cost-explanation-container ul li::before {
        font-size: 0.9em;
    }
}

/* --- Styles for Article Section (Similar to cost-explanation-section but with article focus) --- */
.article-section {
    padding: 60px 0;
    background-color: #f8f8f8;
    text-align: right;
}

.article-container {
    max-width: 900px; /* عرض کانتینر مقاله */
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    line-height: 1.9; /* فاصله خطوط برای خوانایی بهتر متن مقاله */
    color: #333;
    font-size: 1.1em; /* اندازه پیش‌فرض متن مقاله */
}

.article-container h2 {
    font-size: 2.5em;
    color: #0098b3;
    margin-bottom: 35px;
    text-align: center;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.article-container h3 {
    font-size: 1.8em;
    color: #007b8e;
    margin-top: 45px;
    margin-bottom: 20px;
    border-right: 4px solid #0098b3;
    padding-right: 15px;
    font-weight: 600;
}

.article-container p {
    margin-bottom: 20px;
    text-align: justify; /* **متن پاراگراف‌ها justify باشد** */
}

/* ریسپانسیو برای بخش مقاله */
@media (max-width: 992px) {
    .article-container {
        padding: 30px;
    }
    .article-container h2 {
        font-size: 2em;
        margin-bottom: 25px;
    }
    .article-container h3 {
        font-size: 1.5em;
        margin-top: 35px;
        margin-bottom: 15px;
    }
    .article-container p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .article-section {
        padding: 40px 0;
    }
    .article-container {
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        max-width: 95%;
    }
    .article-container h2 {
        font-size: 1.7em;
        margin-bottom: 20px;
    }
    .article-container h3 {
        font-size: 1.3em;
        margin-top: 25px;
        margin-bottom: 10px;
        padding-right: 10px;
        border-right-width: 3px;
    }
    .article-container p {
        font-size: 0.95em;
        margin-bottom: 15px;
        text-align: right; /* در موبایل به راست تراز شود */
    }
}

/* --- Styles for Resume Section --- */
.resume-section {
    padding: 60px 0;
    background-color: #f8f8f8;
    text-align: right;
}

.resume-container {
    max-width: 1200px; /* کانتینر اصلی رزومه، کمی عریض‌تر برای دو ستون */
    margin: 0 auto;
    padding: 20px; /* پدینگ داخلی برای کل کانتینر */
}

.lawyer-card {
    display: flex; /* برای قرار دادن متن و عکس‌ها کنار هم */
    flex-direction: row; /* در دسکتاپ، محتوا و عکس کنار هم */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* برای مدیریت border-radius روی تصاویر */
    margin-bottom: 50px; /* فاصله بین کارت‌های وکلای مختلف (اگر بیشتر شدند) */
    padding: 30px; /* پدینگ داخلی برای کل کارت وکیل */
    gap: 40px; /* فاصله بین بخش متن و بخش تصاویر */
    align-items: flex-start; /* تراز آیتم ها از بالا */
}

.lawyer-content {
    flex: 2; /* بخش محتوا دو برابر بخش عکس‌ها عرض بگیرد */
    padding-left: 20px; /* پدینگ برای فاصله از عکس‌ها */
}

.lawyer-content h2 {
    font-size: 2.8em;
    color: #0098b3;
    margin-bottom: 10px;
    font-weight: 700;
}

.lawyer-content h3 {
    font-size: 1.6em;
    color: #007b8e;
    margin-bottom: 30px;
    font-weight: 600;
    border-bottom: 2px solid #eee; /* خط جداکننده زیر عنوان */
    padding-bottom: 10px;
}

.lawyer-content p {
    margin-bottom: 20px;
    font-size: 1.05em;
    line-height: 1.9;
    color: #444;
    text-align: justify; /* متن رزومه justify باشد */
}

/* برای بولد کردن و برجسته کردن متون خاص در رزومه */
.lawyer-content strong {
    font-weight: bold;
    color: #007b8e; /* یک رنگ متفاوت برای بولدها */
}

.lawyer-images {
    flex: 1; /* بخش عکس‌ها یک برابر عرض بگیرد */
    display: flex;
    flex-direction: column; /* عکس‌ها زیر هم قرار بگیرند */
    gap: 20px; /* فاصله بین دو عکس */
    align-items: center; /* وسط‌چین کردن عکس‌ها در ستون خودشان */
    padding-right: 20px; /* پدینگ برای فاصله از متن */
}

.lawyer-images img {
    width: 300px; /* عرض تصویر */
    height: 500px; /* ارتفاع تصویر */
    object-fit: cover; /* تصویر را برش می‌دهد تا ابعاد را پر کند */
    border-radius: 8px; /* گوشه‌های گرد برای عکس‌ها */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lawyer-images img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* --- Responsive Styles for Resume Section --- */
@media (max-width: 992px) {
    .lawyer-card {
        flex-direction: column; /* در تبلت و موبایل، محتوا و عکس زیر هم قرار بگیرند */
        padding: 25px;
        gap: 30px;
    }
    .lawyer-content {
        padding-left: 0; /* حذف پدینگ چپ در حالت تک ستونه */
    }
    .lawyer-images {
        flex-direction: row; /* در تبلت، عکس‌ها کنار هم قرار بگیرند */
        justify-content: center; /* عکس‌ها وسط‌چین شوند */
        padding-right: 0; /* حذف پدینگ راست در حالت تک ستونه */
        gap: 15px; /* فاصله کمتر بین عکس‌ها در حالت افقی */
    }
    .lawyer-images img {
        width: 45%; /* هر عکس 45% از عرض والد بگیرد */
        height: 250px; /* ارتفاع کمتر در تبلت */
    }
    .lawyer-content h2 {
        font-size: 2.2em;
        text-align: center; /* عنوان در موبایل وسط‌چین شود */
    }
    .lawyer-content h3 {
        font-size: 1.4em;
        text-align: center; /* زیرعنوان در موبایل وسط‌چین شود */
        border-bottom: none; /* حذف خط زیرین */
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    .resume-section {
        padding: 40px 0;
    }
    .resume-container {
        padding: 15px;
    }
    .lawyer-card {
        padding: 20px;
        gap: 20px;
    }
    .lawyer-content h2 {
        font-size: 1.8em;
    }
    .lawyer-content h3 {
        font-size: 1.2em;
    }
    .lawyer-content p {
        font-size: 0.95em;
        line-height: 1.8;
        text-align: right; /* در موبایل به راست تراز شود */
    }
    .lawyer-images {
        flex-direction: column; /* در موبایل کوچک، عکس‌ها دوباره زیر هم */
        gap: 15px;
    }
    .lawyer-images img {
        width: 80%; /* هر عکس 80% از عرض والد بگیرد (تکی) */
        height: 350px; /* ارتفاع بیشتر برای نمایش بهتر */
    }
}

@media (max-width: 480px) {
    .lawyer-images img {
        width: 100%; /* در موبایل خیلی کوچک، عرض کامل را بگیرد */
        height: 300px;
    }
}


.main-footer {
  background: #2c2c2c; /* خاکستری تیره */
  color: #f1f1f1;
  padding: 50px 20px 20px;
  font-size: 14px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1;
  min-width: 260px;
}

.footer-column h3 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #ffd54f; /* طلایی برای تیتر */
}

.footer-column.about p {
  color: #ccc;
  line-height: 1.8;
}

/* لینک‌ها در حالت کارت */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
}

.footer-link-card {
  background: #3a3a3a;
  color: #4dd0e1; /* آبی فیروزه‌ای روشن */
  text-decoration: none;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.footer-link-card i {
  font-size: 18px;
  margin-bottom: 6px;
  color: #4dd0e1; /* هماهنگ با متن لینک */
}

.footer-link-card:hover {
  background: #444;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  color: #fff;
}

.footer-link-card:hover i {
  color: #ffd54f; /* آیکون‌ها روی hover طلایی */
}

/* تماس */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: #81c784; /* سبز روشن */
}

.footer-contact a {
  color: #81c784; /* لینک‌های تماس/ایمیل سبز روشن */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #fff; /* روی hover سفید */
}

.footer-contact i {
  margin-left: 8px;
  color: #81c784;
}

/* شبکه‌های اجتماعی */
.footer-social {
  text-align: center;
  margin: 30px 0;
}

.footer-social a {
  color: #1ff; /* سفید یا رنگ روشن */
  font-size: 22px;
  margin: 0 10px;
  display: inline-block;
}


.footer-social a:hover {
  color: #ffd54f;
  transform: scale(1.2);
}

/* کپی‌رایت */
.footer-bottom {
  text-align: center;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
  margin-top: 10px;
  color: #aaa;
}



/* های‌لایت ملایم باکس فرم وقتی اسکرول می‌رسه */
.consultation-form-box.highlighted {
  animation: formPulse 1.3s ease-out 1;
  box-shadow: 0 12px 28px rgba(0, 85, 170, 0.15);
}
@keyframes formPulse {
  0% { box-shadow: 0 0 0 rgba(0, 85, 170, 0); }
  30% { box-shadow: 0 18px 36px rgba(0, 85, 170, 0.25); }
  100% { box-shadow: 0 12px 28px rgba(0, 85, 170, 0.15); }
}



/* کارت فرم مشاوره */
.form-card{
  background:#fff;
  border:1px solid #e8eef5;
  border-radius:18px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  max-width:820px;
  margin:16px auto;
}
.form-card__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
}
.form-card__head i{
  font-size:28px;
  color:#007b8e;
  margin-top:2px;
}
.form-card__head h3{
  margin:0 0 6px 0;
  font-size:18px;
}
.form-card__head p{
  margin:0;
  color:#5b6b7a;
  font-size:14px;
}
.form-card__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* فیلدها */
.form-card__form input,
.form-card__form select,
.form-card__form textarea {
  width: 100%;
  background: #ffffff; /* پس‌زمینه سفیدتر */
  border: 1px solid #dbe6f1;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* هاور و فوکوس زیبا */
.form-card__form input:focus,
.form-card__form select:focus,
.form-card__form textarea:focus {
  border-color: #7ab6ff;
  box-shadow: 0 0 0 3px rgba(122, 182, 255, 0.25);
  background: #f9fcff;
}

/* دکمه */
.form-card .submit-button {
  width: 100%;
  background: linear-gradient(90deg, #007b8e, #0099b8);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.form-card .submit-button:hover {
  background: linear-gradient(90deg, #0099b8, #00bcd4);
  transform: translateY(-2px);
}

/* شمارنده کاراکتر */
.char-hint {
  text-align: left;
  color: #7a8ca0;
  font-size: 12px;
  margin-top: -6px;
}




/* کانتینر عریض مخصوص Q&A */
.container--wide{
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
}

/* گرید Q&A تمام‌عرض و واکنش‌گرا */
.qa-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
  width:100%;
}

/* کارت‌های Q&A (کمی بزرگتر از comment-card مرسوم) */
.qa-grid .comment-card{
  background:#fff;
  border:1px solid #e8eef5;
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.qa-grid .comment-text{
  font-size:15px;           /* بزرگ‌تر */
  line-height:1.9;
  color:#2b3947;
}

.qa-grid .comment-text strong{
  color:#0f3a5a;
}

.qa-grid .author-name{ font-weight:700; }
.qa-grid .author-role{ color:#6d7f92; font-size:12px; }

/* در اسکرین‌های خیلی بزرگ، کمی فاصله ستون‌ها بیشتر شود */
@media (min-width:1600px){
  .qa-grid{ gap:24px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}


.service-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}

@media (min-width: 900px) {
  .service-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* کارت هر نوع مشاوره */
.service-option {
  display: flex;                /* مهم: فلکس برای اینکه چک‌باکس و متن کنار هم باشند */
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;

  border-radius: 12px;
  border: 1px solid #dde3ea;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* خود چک‌باکس داخل کارت */
.service-option input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* محتوای متنی کارت */
.service-option__body {
  flex: 1;
}

/* هدر کارت (عنوان + Badge مبلغ/رایگان) */
.service-option__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.service-option__title {
  font-weight: 600;
  font-size: 0.98rem;
}

.service-option__badge {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #eef6ff;
  color: #1a73e8;
  white-space: nowrap;
}

.service-option__badge--free {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.service-option__desc {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}

/* افکت هاور برای همه کارت‌ها (فارغ از انتخاب) */
.service-option:hover {
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.12);
}

/* حالت انتخاب‌شده (کارت فعال) – این کلاس را JS روی کارت درست می‌گذارد */
.service-option--selected {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.16);
  background-color: #f0f6ff; /* آبی کم‌رنگ */
}

/* اصلاح نمایش صفحه مشاوره در موبایل */
@media (max-width: 768px) {

  /* ظرف اصلی این صفحه */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* خود کارت فرم */
  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    border-radius: 12px;
  }

  /* برای اطمینان از نبود اسکرول افقی */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* فیلدها در موبایل حتماً تمام عرض شوند و بزرگ دیده شوند */
  input[type="text"],
  input[type="tel"],
  select,
  textarea {
    width: 100%;
    font-size: 16px;
  }

  /* گزینه‌های نوع مشاوره در موبایل تک‌ستونه شوند */
  .service-options {
    display: block;
  }

  .service-option {
    display: block;
    margin-bottom: 12px;
  }

  .service-option__body {
    width: 100%;
  }
}