html {
    box-sizing: border-box;
}

*, *::after, *::before {
    box-sizing: inherit;
    margin: 0;
    padding: 0; /* برای اطمینان از صفر شدن padding نیز اضافه می‌کنیم */
}

body {
    font-family: "Poppins", sans-serif;
    min-height: 100vh; /* استفاده از min-height برای جلوگیری از مشکلات اسکرول */
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* یک رنگ پس‌زمینه برای زیبایی */
}
/* تنظیمات کانتینر اصلی صفحه لاگین */
.login-page-wrapper {
    min-height: 100vh; /* حداقل ارتفاع صفحه به اندازه 100 درصد ارتفاع viewport */
    display: flex;
    justify-content: center;  /* وسط‌چین کردن به صورت افقی */
    align-items: center;      /* وسط‌چین کردن به صورت عمودی */
    background-color: #004d40; /* رنگ پس‌زمینه سبز تیره */
}
/* اگر قصد دارید از flexbox استفاده کنید، بهتر است این تنظیمات فقط برای کانتینر‌های خاص اعمال شوند */
input, button{
    font-family: inherit;
    border: none;
    outline: none ;
}
/* دایره‌ها */
.shape {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    position: absolute;
    z-index: 0; /* تغییر z-index برای نمایش بهتر */
    opacity: 0.8; /* شفافیت برای ایجاد تضاد بیشتر */
}

/* دایره بالا سمت چپ */
.shape--one {
    background: linear-gradient(#0D47A1, #42A5F5); /* گرادیان با رنگ آبی */
    top: -100px;
    left: -100px;
    z-index: 0; /* پایین‌تر از کادر لاگین */
}

/* دایره پایین سمت راست */
.shape--two {
    background: linear-gradient(#E65100, #FFA726); /* گرادیان با رنگ نارنجی */
    bottom: -100px;
    right: -100px;
    z-index: 0; /* پایین‌تر از کادر لاگین */
}

/* استایل کادر لاگین */
.wrapper {
    width: 400px;
    position: relative; /* این مورد لازم است تا دایره‌ها زیر کادر قرار بگیرند */
    z-index: 1; /* بالاتر از دایره‌ها */
    background-color: rgba(255, 255, 255, 0.2); /* نیمه شفاف برای تضاد بیشتر */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); /* ایجاد سایه برای برجسته کردن کادر */
}
.form{
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255,0.13);
    color: #fff;
    padding: 50px 35px 35px 35px;
    border: 2px solid rgba(255, 255, 255,0.13);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.form_container {
    display: flex;
    justify-content: space-between; /* تقسیم فاصله بین دو عنصر */
    align-items: center; /* وسط‌چین کردن در محور عمودی */
    margin-bottom: 50px;
}
.form_title_sabot{
    font-size: 32px;
    text-align: center;
    color: transparent;
    background:linear-gradient(to left, blue, orange);
    -webkit-background-clip:text;
    background-clip: text;
    text-decoration: none;
    flex: 1; /* هر عنصر به صورت مساوی فضا می‌گیرد */
    margin: 0 20px; /* فاصله‌ای بین دو عنصر */
}
.form_title_sabot_w{
    font-size: 32px;
    text-align: center;
    color: transparent;
    background:linear-gradient(to right, blue, orange);
    -webkit-background-clip:text;
    background-clip: text;
    text-decoration: none;
    flex: 1; /* هر عنصر به صورت مساوی فضا می‌گیرد */
    margin: 0 20px; /* فاصله‌ای بین دو عنصر */
}

.form-input-wrapper{
    margin-bottom: 26px;

}
.form_label{
    font-size: 16px;
    color:#37474F;
}
.form_input{
    font-size: 18px;
    font-weight: 300;
    display: block;
    height: 50px;
    background-color:#EFEBE9;
    padding: 0 10px;
    width: 100%;
    margin-top: 8px;
    color:#263238;
    border-radius: 4px;
}
.form_input::placeholder{
    color: #546E7A;
}
.form_submit-btn{
    /* background-color: #ec9f9f; */
    background-image: linear-gradient(to right ,#FF7043,#1565C0);

    color: #080710;
    border-radius: 4px;
    text-align: center;
    padding: 15px 0;
    display: block;
    font-size: 18px;
    width: 100%;
    margin-top: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.form_submit-btn:hover {
    background-color: #42A5F5; /* تغییر رنگ پس‌زمینه */
    color: #fff; /* تغییر رنگ متن */
    transform: scale(1.05); /* بزرگ شدن دکمه */
}
.log {
    margin-top: 20px; /* فاصله بالا */
    text-align: center; /* تراز وسط متن */
    position: relative; /* برای قرار دادن خط زیر نسبت به متن */
}

.log a {
    color: #42A5F5; /* رنگ لینک */
    text-decoration: none; /* حذف خط زیر لینک */
    font-size: 16px; /* اندازه فونت */
    position: relative; /* برای قرار دادن خط زیر نسبت به لینک */
}

.underline {
    content: ''; /* محتوا خالی */
    display: block; /* نمایش به صورت بلوک */
    height: 2px; /* ارتفاع خط */
    background-color: #42A5F5; /* رنگ خط */
    width: 100%; /* عرض خط */
    position: absolute; /* قرار دادن در محل دقیق */
    bottom: -4px; /* موقعیت خط نسبت به لینک */
    left: 0; /* تراز سمت چپ */
    transform: scaleX(0); /* خط مخفی */
    transition: transform 0.3s ease; /* انیمیشن نرم */
}

.log a:hover + .underline {
    transform: scaleX(1); /* خط کشویی در حالت هاور */
}
/* صفحه لاگین تمام */

/* تنظیمات کلی برای body */
body {
    margin: 0; /* حذف فضای پیش‌فرض */
    padding: 0; /* حذف فاصله داخلی */
    height: 100vh; /* ارتفاع 100% viewport */
    background-color: #f4f4f4; /* رنگ پس‌زمینه دلخواه */
    font-family: 'Arial', sans-serif; /* فونت کلی */
}
/* استایل برای کل صفحه */

/* پس زمینه سبز پسته‌ای برای کل صفحه */
.profile-blog-49 {
    background-color: #c8e6c9; /* سبز پسته‌ای */
    padding: 0;
    margin: 0;
    min-height: 100vh; /* حداقل ارتفاع برای پوشش کامل صفحه */
}

/* هدر با تصویر پروفایل، جستجو و دکمه خروج */
.profile-header-09 {
    display: flex;
    justify-content: space-between; /* فاصله بین عناصر */
    align-items: center; /* مرکز چیدمان عمودی */
    background-color: #81c784; /* رنگ هدر */
    padding: 20px;
    height: 100px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* تصویر پروفایل در بالای کادر جستجو */
.profile-picture-01, .profile-picture-19, .profile-picture-16 {
    border-radius: 50%;
    width: 70px; /* سایز پروفایل */
    height: 70px;
    object-fit: cover;
    border: 3px solid #fff; /* حاشیه سفید */
    transition: transform 0.3s ease; /* انیمیشن بزرگ شدن */
    margin-top: 10px;
}

.profile-picture-01:hover {
    transform: scale(1.1); /* انیمیشن بزرگ شدن تصویر پروفایل */
}

/* کادر جستجو وسط هدر با عرض کوچک‌تر */
.search-container-6545 {
    display: flex;
    justify-content: center; /* مرکز چیدمان */
    align-items: center;
    flex-grow: 1; /* فضای باقی‌مانده را پر می‌کند */
    margin: 0 20px; /* فاصله از سمت چپ و راست */
}

.search-input-665 {
    padding: 8px; /* padding */
    width: 30%; /* عرض کوچک‌تر برای کادر جستجو */
    border: 2px solid #fff; /* حاشیه سفید */
    border-radius: 5px; /* گوشه‌های گرد */
    transition: width 0.3s ease; /* انیمیشن تغییر عرض */
}

.search-input-665:focus {
    width: 35%; /* انیمیشن تغییر عرض هنگام تمرکز */
}

.search-button-81 {
    background-color: #4caf50; /* رنگ دکمه جستجو */
    color: white;
    border: none;
    padding: 8px 15px; /* padding */
    cursor: pointer;
    border-radius: 5px; /* گوشه‌های گرد */
    margin-left: 10px;
}

.search-button-81:hover {
    background-color: #388e3c; /* رنگ دکمه هنگام hover */
}

/* حذف زیر خط لینک‌ها */
.posts-header a {
    text-decoration: none; /* حذف زیر خط */
}

/* دکمه خروج سمت چپ هدر */
.logout-btn-908 {
    text-align: left; /* چیدمان به سمت چپ */
}

.logout-btn-908 button {
    background-color: #e57373; /* رنگ دکمه خروج */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px; /* گوشه‌های گرد */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}

.logout-btn-908 button:hover {
    background-color: #f44336; /* رنگ دکمه خروج هنگام hover */
}
/* استایل لینک‌های ایجاد پست، ویرایش پروفایل و تغییر پسورد */
.posts-header {
    display: flex; /* نمایش به صورت افقی */
    justify-content: center; /* مرکز چیدمان */
    margin-top: 20px; /* فاصله بالای لینک‌ها */
    flex-direction: row; /* به صورت افقی نمایش */
    margin-bottom: 10px;
}

.posts-header a {
    background-color: #4caf50; /* رنگ دکمه‌ها */
    color: white;
    padding: 10px 20px; /* padding دکمه‌ها */
    border-radius: 5px; /* گوشه‌های گرد */
    margin: 0 10px; /* فاصله افقی بین دکمه‌ها */
    text-decoration: none; /* حذف زیر خط */
    transition: transform 0.3s ease, background-color 0.3s ease; /* انیمیشن */
}

.posts-header a:hover {
    transform: translateY(-3px); /* انیمیشن بالا رفتن */
    background-color: #388e3c; /* رنگ دکمه‌ها هنگام hover */
}

/* استایل بهبود یافته برای کارت پست‌ها */
.post-card-806 {
    background-color: #ffffff; /* رنگ پس‌زمینه کارت پست */
    border-radius: 10px; /* گوشه‌های گرد */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* سایه عمیق‌تر */
    margin-bottom: 20px;
    padding: 20px;
    width: 80%; /* 80 درصد عرض صفحه */
    margin-left: auto; /* وسط چین */
    margin-right: auto; /* وسط چین */
    transition: transform 0.3s ease; /* انیمیشن بلند شدن */
    position: relative; /* برای دکمه‌های ویرایش و حذف */
}

.post-card-806:hover {
    transform: translateY(-5px); /* انیمیشن بلند شدن کارت پست */
}

/* ویرایش و حذف در سمت راست هر پست */
.post-actions-man {
    position: absolute;
    top: 10px; /* بالای پست */
    right: 10px; /* سمت راست */
    display: flex; /* نمایش دکمه‌ها به صورت افقی */
    gap: 10px; /* فاصله بین دکمه‌ها */
}

.btn-edit-36, .btn-delete-52 {
    background-color: #4caf50; /* رنگ دکمه ویرایش */
    color: white;
    padding: 8px 12px;
    text-decoration: none; /* حذف زیر خط */
    border-radius: 5px; /* گوشه‌های گرد */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}

.btn-edit-36:hover {
    background-color: #388e3c; /* رنگ دکمه ویرایش هنگام hover */
}

.btn-delete-52 {
    background-color: #e57373; /* رنگ دکمه حذف */
}

.btn-delete-52:hover {
    background-color: #f44336; /* رنگ دکمه حذف هنگام hover */
}

/* استایل والد متن و تصویر */
.text-and-photo-post {
    display: flex; /* تنظیم فلکس‌باکس برای قرارگیری افقی تصویر و متن */
    flex-direction: row-reverse; /* برای قرار دادن تصویر در سمت راست و متن در سمت چپ */
    align-items: center; /* تراز وسط محور عمودی برای متن و تصویر */
    justify-content: space-between; /* فاصله متناسب بین تصویر و متن */
    margin-bottom: 20px; /* فاصله بین پست‌ها */
}

/* استایل تصویر */
.post-image-photo-1 {
    max-width: 100%; /* تنظیم عرض تصویر به 100 درصد (یا هر درصد دیگری که نیاز دارید) */
    height: auto; /* ارتفاع خودکار */
    border-radius: 10px; /* گوشه‌های گرد */
    margin-left: 15px; /* فاصله از سمت چپ تصویر */
    transition: transform 0.3s ease; /* برای ایجاد افکت تغییر اندازه نرم */
}

/* افکت هاور */
.post-image-photo-1:hover {
    transform: scale(1.1); /* تصویر هنگام هاور 10 درصد بزرگ‌تر می‌شود */
}

/* استایل متن‌ها */
.text-photo-post-por {
    max-width: 49%; /* تنظیم عرض متن به 55 درصد */
    color: #333; /* رنگ متن */
    font-size: 16px; /* اندازه فونت */
    line-height: 1.5; /* فاصله خطوط متن */
    text-align: center;
}
/* استایل نویسنده پست */
.post-author-15 {
    font-size: 14px; /* اندازه متن نویسنده */
    color: #555; /* رنگ متن */
    text-align: center;
}

/* استایل لینک عنوان پست */
.post-body-all h2 a {
    text-decoration: none; /* حذف زیر خط */
    color: #333; /* رنگ عنوان */
    transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
}

.post-body-all h2 a:hover {
    color: #4caf50; /* رنگ عنوان هنگام hover */
}
/* اسایل صفخه پروفایل تمام */

/* استایل برای کل صفحه */
.container-edit {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
    font-family: 'Vazir', sans-serif;
    color: #333;
    animation: fadeInEffect 0.8s ease-in-out;
}

/* انیمیشن ورود */
@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* عنوان */
.edit-here {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
    color: #007bff;
    font-weight: bold;
}

/* استایل فرم و برچسب‌ها */
.form-group-1,
.form-group-2,
.form-group-3,
.form-group-4,
.form-group-5,
.form-group-6,
.form-group-7,
.form-group-8 {
    margin-bottom: 20px;
}

.control-label-name,
.control-label-lastname,
.control-label-email,
.control-label-lava,
.control-label-bio,
.control-label-car,
.control-label-photo,
.control-label-phone {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #555;
}

/* استایل ورودی‌ها */
input[type="text"],
input[type="email"],
input[type="date"],
textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: border 0.3s ease;
}

input:focus,
textarea:focus {
    border: 1px solid #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}
/* استایل دکمه ذخیره */
.btn-primary-save {
    background-color: #007bff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.btn-primary-save:hover {
    background-color: #0056b3;
}

/* افکت های hover */
input[type="file"],
input[type="text"],
input[type="email"],
input[type="date"],
textarea:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

/* استایل برای فایل تصویر */
input[type="file"] {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f1f1f1;
}

/* دکمه انتخاب فایل */
input[type="file"]::before {
    content: 'انتخاب فایل';
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

input[type="file"]:hover::before {
    background-color: #0056b3;
}

/* تصویر نمایشی */
img {
    max-width: 1100px;
    margin-top: 100px;
}
/* استایل کلی برای صفحه */
.container-edit-page {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* استایل تصاویر سمت چپ و راست */
.left-image img, .right-image img {
    width: 450px;
    height: 800px;
    border-radius: 10px;
}

.side-image-left img, .side-image-right img {
    width: 80%; /* بزرگ‌تر کردن عرض تصاویر */
    max-width: 800px; /* حداکثر عرض */
    height: 400px; /* ارتفاع ثابت با واحد px */
    margin: 20px;
    object-fit: cover;
    border-radius: 12px; /* گوشه‌های گرد برای تصاویر */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* سایه زیبا برای تصاویر */
    transition: transform 0.3s ease; /* انیمیشن برای تغییرات هنگام هاور */
}

/* استایل hover برای بزرگ‌نمایی هنگام قرارگیری موس روی تصویر */
.side-image-left img:hover, .side-image-right img:hover {
    transform: scale(1.05); /* بزرگ شدن تصویر هنگام هاور */
}
/* استایل فرم */
.container-edit {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-top: 400px;
    margin-bottom: 30px;
}

/* استایل دکمه ذخیره */
.btn-primary-save {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary-save:hover {
    background-color: #45a049;
}

/* استایل فرم‌گروه‌ها */
.form-group-1, .form-group-2, .form-group-3, .form-group-4,
.form-group-5, .form-group-6, .form-group-7, .form-group-8 {
    margin-bottom: 15px;
}

/* استایل لیبل‌ها */
.control-label-name, .control-label-lastname, .control-label-email,
.control-label-lava, .control-label-bio, .control-label-car,
.control-label-photo, .control-label-phone {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

/* استایل های صفحه ویرایش اطلاغات تموم شد */

                                                /* استایل های مربوط به تفیر پسورد*/

/* استایل کلی کانتینر تغییر پسورد */
.change-password-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #00b4db, #0083b0);
    padding: 20px;
    font-family: 'Roboto', sans-serif;
}

/* استایل عنوان */
.title-pas {
    font-size: 36px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    animation: fadeInDown 1s ease-in-out;
}

/* استایل توضیحات */
.description-p {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 30px;
    text-align: center;
    animation: fadeInUp 1s ease-in-out;
}

/* استایل فرم */
.change-password-form-2 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 1.5s ease-in-out;
}

/* استایل اینپوت‌ها */
.change-password-form-2 input {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.change-password-form-2 input:focus {
    border-color: #00b4db;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 180, 219, 0.8);
}

/* استایل دکمه ارسال */
.btn-submit-save {
    padding: 15px;
    font-size: 18px;
    background-color: #00b4db;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-submit-save:hover {
    background-color: #0083b0;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 180, 219, 0.6);
}
/* انیمیشن‌ها */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ریسپانسیو بودن */
@media (max-width: 768px) {
    .change-password-1 {
        padding: 15px;
    }

    .title-pas {
        font-size: 28px;
    }

    .description-p {
        font-size: 16px;
    }

    .change-password-form-2 {
        padding: 20px;
    }
}

/* استایل های مربوط به تفیر پسورد تمام شد*/

                                                           /* استایل های مربوط به ایحاد پست*/

/* استایل فرم ویرایش */
.create-form-hed {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.8s ease-in-out;
    overflow: hidden;
    padding-bottom: 100px;
}

/* استایل گروه‌های فرم */
.form-groups {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* استایل ورودی‌های فرم */
.form-groups input,
.form-groups textarea,
.form-groups select {
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-groups input:focus,
.form-groups textarea:focus,
.form-groups select:focus {
    border-color: #00b4db;
    box-shadow: 0 0 10px rgba(0, 180, 219, 0.3);
    outline: none;
}

/* استایل تصویر */
.image-item-1 {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px; /* افزایش فاصله بین تصاویر */
    margin-top: -10px;
}

.image-item-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* دکمه حذف تصویر */
.btn-delete-photo {
    position: relative; /* دکمه حذف حالا در زیر تصویر به درستی قرار می‌گیرد */
    display: block;
    margin-top: 1px;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 10; /* اطمینان از این که دکمه بالای تصویر قرار دارد */
}

.btn-delete-photo:hover {
    background-color: red;
    transform: scale(1.05);
}

/* فاصله بیشتر بین دکمه حذف و تصویر */
.image-gallerys {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* فاصله بیشتر بین آیتم‌های تصاویر */
    margin-top:-30px;
}
/* استایل قسمت پایینی فرم */
.form-footer {
    display: flex; /* استفاده از فلکس برای چیدمان */
    justify-content: space-between; /* فاصله دادن بین عناصر */
    margin-top: 20px; /* فاصله بین گالری و دکمه ثبت */
}

/* دکمه ثبت پست */
.submit-save-photo {
    padding: 15px;
    font-size: 18px;
    color: white;
    background-color: #00b4db;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.submit-save-photo:hover {
    background-color: #0083b0;
    transform: scale(1.05);
}

/* استایل خطاها */
.form-errors-2,
.form-non-field-errors-2 {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-top: 20px;
    border-radius: 10px;
    font-size: 14px;
}

/* انیمیشن fade-in */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ریسپانسیو برای نمایشگرهای کوچکتر */
@media (max-width: 768px) {
    .create-form-hed {
        padding: 20px;
    }

    .image-item-1 {
        width: 100px;
        height: 100px;
    }

    .submit-save-photo {
        font-size: 16px;
    }
}

/* استایل های مربوط به ایحاد پست تمام شد*/


/* کانتینر اصلی صفحه حذف پست */
.delete-post-3 {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff; /* رنگ پس‌زمینه سفید */
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    text-align: center; /* تراز متن به وسط */
    animation: fadeIn 0.8s ease-in-out; /* انیمیشن محو شدن */
}

/* عنوان صفحه حذف پست */
.delete-post-title-3 {
    font-size: 24px; /* اندازه فونت بزرگ */
    color: #333333; /* رنگ متن تیره */
    margin-bottom: 20px; /* فاصله پایین */
}

/* دکمه برگشت */
.btn-back-post {
    display: inline-block; /* نمایش به صورت بلوک در خط */
    padding: 10px 20px; /* padding برای دکمه */
    font-size: 16px; /* اندازه فونت */
    background-color: #007bff; /* رنگ پس‌زمینه آبی */
    color: white; /* رنگ متن سفید */
    border: none; /* حذف حاشیه */
    border-radius: 8px; /* گوشه‌های گرد */
    text-decoration: none; /* حذف خط زیر */
    transition: background-color 0.3s, transform 0.3s; /* افکت‌های ترنزیشن */
}

.btn-back-post:hover {
    background-color: #0056b3; /* رنگ تیره‌تر هنگام هاور */
    transform: translateY(-2px); /* جابجایی جزئی به بالا */
}

/* فرم حذف پست */
.delete-post-form-3 {
    margin-top: 20px; /* فاصله بالای فرم */
}

/* دکمه حذف */
.btn-delete-3 {
    padding: 12px 24px; /* padding برای دکمه */
    font-size: 18px; /* اندازه فونت */
    background-color: #dc3545; /* رنگ قرمز */
    color: white; /* رنگ متن سفید */
    border: none; /* حذف حاشیه */
    border-radius: 8px; /* گوشه‌های گرد */
    cursor: pointer; /* تغییر نشانگر به دست */
    transition: background-color 0.3s, transform 0.3s; /* افکت‌های ترنزیشن */
}

.btn-delete-3:hover {
    background-color: #c82333; /* رنگ تیره‌تر هنگام هاور */
    transform: translateY(-2px); /* جابجایی جزئی به بالا */
}

/* انیمیشن محو شدن */
@keyframes fadeIn {
    0% {
        opacity: 0; /* شفافیت صفر در ابتدا */
        transform: translateY(-20px); /* جابجایی به سمت بالا */
    }
    100% {
        opacity: 1; /* شفافیت کامل در انتها */
        transform: translateY(0); /* به حالت اولیه برمی‌گردد */
    }
}

                                                        /* استایل های مربوط به حذف پست تمام شد*/

/* Reset CSS برای حذف پیش‌فرض‌های مرورگر */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* کانتینر اصلی پست‌ها و کامنت‌ها */
.post-containers-123 {
    display: flex;  /* استفاده از فلکس باکس */
    flex-direction: row; /* جهت افقی برای نمایش پست و کامنت در کنار هم */
    gap: 20px; /* فاصله بین پست و کامنت‌ها */
    max-width: 1200px; /* حداکثر عرض کانتینر */
    margin: 0 auto; /* مرکز کردن کانتینر */
    padding: 20px; /* فاصله داخلی */
}

/* بخش پست */
.post-delete-1 {
    flex: 3; /* نسبت عرض 3 به 1 با بخش کامنت‌ها */
    background-color: #f9f9f9; /* رنگ پس‌زمینه */
    padding: 20px; /* فاصله داخلی */
    border-radius: 8px; /* گوشه‌های گرد */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* سایه ظریف */
}

/* عنوان پست */
.post-title-2 {
    font-size: 2rem; /* اندازه فونت عنوان */
    color: #333; /* رنگ عنوان */
    margin-bottom: 15px; /* فاصله از پایین */
    font-weight: bold; /* ضخیم کردن عنوان */
}

/* توضیحات پست */
.post-body-3 {
    font-size: 1.1rem; /* اندازه فونت توضیحات */
    line-height: 1.6; /* فاصله بین خطوط */
    color: #555; /* رنگ متن توضیحات */
    margin-bottom: 20px; /* فاصله از پایین */
}

/* جداکننده */
.dis-pos {
    border: none; /* حذف حاشیه */
    border-top: 1px solid #ddd; /* خط افقی جداکننده */
    margin: 20px 0; /* فاصله بالا و پایین */
}

/* تاریخ و زمان پست */
.post-meta-and-4 {
    display: flex;
    justify-content: space-between; /* فاصله بین تاریخ و زمان */
    color: #999; /* رنگ خاکستری برای متا اطلاعات */
    font-size: 0.9rem; /* اندازه فونت کوچک‌تر */
    margin-bottom: 20px; /* فاصله از پایین */
}

/* تصاویر پست */
.post-images-posts {
    display: flex;
    flex-wrap: wrap; /* پیچیدن تصاویر در خطوط جدید */
    gap: 15px; /* فاصله بین تصاویر */
}

/* استایل برای نمایش تصویر در حالت معمولی */
.post-images-container-8 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* استایل برای تصویر */
.post-image-9 {
    max-width: 100%;
    height: auto;
    cursor: pointer; /* نشانگر موس به حالت کلیک تغییر پیدا می‌کند */

}

/* استایل تصاویر در حالت عادی */
.post-images-container-8 {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.post-image-9 {
    max-width: 50%; /* اندازه اولیه تصاویر */
    cursor: pointer;
    transition: transform 0.3s ease; /* انیمیشن تغییر اندازه */
}

.post-image-9:hover {
    transform: scale(1.05); /* بزرگ‌تر شدن تصویر هنگام هاور */
}

/* استایل مدال */
.modal-321 {
    display: none; /* پنهان بودن پیش‌فرض */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* پس‌زمینه نیمه شفاف */
    justify-content: center;
    align-items: center;
}

/* استایل تصویر داخل مدال */
.modal-content-15 {
    max-width: 70%;
    max-height: 70%;
    margin: auto;
    display: block;
}

/* دکمه بستن مدال */
.close-342 {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-342:hover {
    color: #f1f1f1;
}

/* بخش کامنت‌ها */
.comments-section-nam {
    flex: 1; /* نسبت عرض کمتر برای بخش کامنت‌ها */
    background-color: #fafafa; /* رنگ پس‌زمینه */
    padding: 20px; /* فاصله داخلی */
    border-radius: 8px; /* گوشه‌های گرد */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* سایه ظریف */
}

/* عنوان کامنت‌ها */
.comments-section-nam h3 {
    font-size: 1.5rem; /* اندازه فونت عنوان کامنت‌ها */
    color: #333; /* رنگ عنوان */
    margin-bottom: 20px; /* فاصله از پایین */
}

/* لیست کامنت‌ها */
.comments-list-pos {
    display: flex;
    flex-direction: column;
    gap: 15px; /* فاصله بین کامنت‌ها */
}
/* آیتم کامنت‌ها */
.comment-items-1 {
    background-color: #f0f0f0; /* رنگ پس‌زمینه کامنت */
    padding: 15px; /* فاصله داخلی */
    border-radius: 8px; /* گوشه‌های گرد */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* سایه کم */
}

/* متن کامنت */
.comment-body-2 {
    font-size: 1rem; /* اندازه فونت */
    margin-bottom: 10px; /* فاصله از پایین */
    color: #333; /* رنگ متن */
}

/* نویسنده کامنت */
.comment-authors-3 {
    font-size: 0.9rem; /* اندازه فونت کوچک‌تر */
    text-align: right; /* تراز به راست */
    color: #777; /* رنگ متن خاکستری */
}

/* فرم افزودن کامنت */
.comment-forms-22 {
    margin-top: 20px; /* فاصله از بالا */
}

.comment-forms-22 input[type="text"],
.comment-forms-22 textarea {
    width: 100%; /* عرض کامل */
    padding: 10px; /* فاصله داخلی */
    margin-bottom: 10px; /* فاصله از پایین */
    border: 1px solid #ddd; /* حاشیه */
    border-radius: 4px; /* گوشه‌های گرد */
    font-size: 1rem; /* اندازه فونت */
}

.submit-comment-sav {
    background-color: #5cb85c; /* رنگ دکمه ارسال */
    color: white; /* رنگ متن دکمه */
    padding: 10px 20px; /* فاصله داخلی */
    border: none; /* حذف حاشیه */
    border-radius: 4px; /* گوشه‌های گرد */
    cursor: pointer; /* نشانگر موس به شکل اشاره‌گر */
    font-size: 1rem; /* اندازه فونت */
}

.submit-comment-sav:hover {
    background-color: #4cae4c; /* تغییر رنگ هنگام هاور */
}
/* استایل های مربوط به ویرایش پست تمام شد*/

/* استایل های مربوط به لیست پست */
/* استایل برای فرم جستجو */
.search-form-post-lis {
    display: flex;
    align-items: center;
    margin-top: -90px;
}

/* استایل آیکون جستجو */
.search-icon-post-2 {
    position: absolute;
    left: 10px;
    color: #4CAF50; /* رنگ آیکون */
    transition: color 0.4s; /* انیمیشن تغییر رنگ آیکون */
}

/* استایل کادر جستجو */
.search-input {
    padding: 10px 10px 10px 40px; /* فاصله داخلی */
    width: 250px; /* عرض کادر پیش‌فرض */
    border: 2px solid #ddd; /* حاشیه اولیه */
    border-radius: 5px; /* گوشه‌های گرد */
    outline: none; /* حذف حاشیه انتخاب */
    font-size: 16px; /* اندازه متن */
    background-color: #f7e7b4; /* رنگ پس‌زمینه کرم کمرنگ */
    transition: all 0.4s ease; /* انیمیشن برای تغییرات */
}

/* تغییرات در زمان فوکوس */
.search-input:focus {
    border: 3px solid #a68f00; /* رنگ حاشیه تیره‌تر و ضخامت بیشتر در زمان فوکوس */
    width: 500px; /* افزایش عرض کادر در زمان فوکوس */
    background-color: #f7e7b4; /* رنگ پس‌زمینه ثابت */
}

/* تغییر رنگ آیکون در زمان فوکوس */
.search-input:focus + .search-icon-post-2 {
    color: #66bb6a; /* تغییر رنگ آیکون در زمان فوکوس */
}

/* انیمیشن برای نمایش و مخفی کردن آیکون جستجو */
.search-input:hover + .search-icon-post-2 {
    transform: scale(1.1); /* بزرگتر شدن آیکون در زمان هاور */
}
/* استایل برای هدر لیست پست‌ها و بخش جستجو */
.header-posts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title-321 {
    font-size: 2rem;
    font-weight: bold;
    color: #2c5f2d; /* سبز تیره */
}
/* استایل برای کانتینر اصلی پست‌ها و دسته‌بندی‌ها */
.container-posts-lis {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #1c1c1c; /* رنگ پس‌زمینه تیره */
}

/* استایل برای دسته‌بندی‌ها */
.sidebar-list {
    width: 25%; /* عرض 25 درصد برای دسته‌بندی‌ها */
    background-color: #2c5f2d; /* رنگ سبز تیره */
    padding: 20px;
    border-radius: 15px;
    color: white;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.sidebar-list:hover {
    transform: translateX(-10px); /* انیمیشن حرکت دسته‌بندی به چپ در هاور */
    background-color: #3b7a40; /* تغییر رنگ پس‌زمینه در هاور */
}

/* استایل برای هر دسته‌بندی */
.category-lists-12 div {
    margin: 15px 0; /* فاصله بین آیتم‌های دسته‌بندی */
}

.category-lists-12 a {
    color: #c1fba4; /* رنگ سبز روشن برای لینک‌ها */
    text-decoration: none;
    font-size: 1.4rem; /* اندازه بزرگ‌تر برای فونت */
    font-weight: bold;
    display: block;
    text-align: right; /* راست‌چین کردن متن */
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s ease; /* اضافه کردن انیمیشن */
}

.category-lists-12 a:hover {
    background-color: #88d498; /* تغییر رنگ پس‌زمینه در هاور */
    color: #1c1c1c; /* تغییر رنگ متن در هاور */
    transform: translateX(-5px); /* حرکت به سمت چپ در هاور */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* اضافه کردن سایه */
}

/* استایل برای پست‌ها */
.post-list-1 {
    width: 72%; /* عرض 75 درصد برای پست‌ها */
    display: flex;
    flex-direction: column;
    gap: 20px; /* فاصله بین پست‌ها */
}

/* استایل هر پست */
.post-item-3 {
    display: flex;
    justify-content: flex-end; /* تصویر سمت راست */
    align-items: center;
    background-color: #2f3e46; /* رنگ تیره برای هر پست */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.post-item-3:hover {
    transform: scale(1.02); /* بزرگ‌تر شدن کل پست در هاور */
}

/* استایل تصویر پست */
.post-images-211 {
    width: 220px; /* اندازه بزرگ‌تر تصویر */
    height: auto;
    border-radius: 10px;
    margin-left: 20px; /* فاصله بین تصویر و عنوان */
    transition: transform 0.3s ease;
}

.post-images-211:hover {
    transform: scale(1.1); /* بزرگ‌تر شدن تصویر در هاور */
}
.post-images-211-m {
    width: 220px; /* عرض کادر */
    height: auto; /* ارتفاع خودکار */
    border-radius: 10px; /* گوشه‌های گرد */
    margin-left: 20px; /* فاصله از سمت چپ */
    padding: 10px; /* فاصله داخلی */
    border: 1px solid #000; /* کادر دور عنصر */
    transition: transform 0.3s ease; /* افکت تغییر اندازه */
    box-sizing: border-box; /* شامل کردن padding و border در width */
    text-align: center; /* متن در مرکز */
    background-color: #333; /* پس‌زمینه‌ی خاکستری تیره */
    color: #fff; /* رنگ متن سفید */
}

.post-images-211-m * {
    text-decoration: none !important; /* حذف خط زیرین با استفاده از !important */
    color: inherit; /* رنگ عناصر داخلی مشابه والد */
}

/* برای هر لینک درون کلاس هم استایل اعمال شود */
.post-images-211-m a {
    text-decoration: none !important; /* حذف خط زیرین لینک‌ها */
    color: inherit; /* جلوگیری از تغییر رنگ لینک‌ها */
}

.post-images-211-m a:hover {
    text-decoration: none !important; /* حذف خط زیرین هنگام هاور */
}

.post-images-211-m:hover {
    transform: scale(1.1); /* بزرگ شدن هنگام هاور */
}
/* استایل برای عنوان پست */
.post-title-21 {
    color: #c1fba4; /* سبز ملایم‌تر */
    font-size: 2rem; /* اندازه فونت عنوان */
    font-weight: bold;
    margin: 0;
    text-align: right; /* متن تایتل راست‌چین */
    transition: all 0.4s ease; /* اضافه کردن انیمیشن */
}

/* انیمیشن برای عنوان در هاور */
.post-title-21:hover {
    color: #88d498; /* تغییر رنگ عنوان در هاور */
    transform: translateX(10px); /* حرکت به سمت راست در هاور */
    letter-spacing: 2px; /* فاصله بیشتر بین حروف */
}

/* استایل لینک عنوان */
.post-title-21 a {
    text-decoration: none; /* حذف خط زیر عنوان */
    color: inherit; /* حفظ رنگ فعلی */
}

.post-title-21 a:hover {
    color: inherit; /* حفظ رنگ در هاور */
}

/* استایل برای توضیحات پست */
.post-description-131 {
    color: #d8e3e7; /* رنگ متن توضیحات */
    font-size: 1.2rem; /* اندازه فونت توضیحات */
    margin-top: 10px;
    line-height: 1.6; /* فاصله بین خطوط */
    text-align: right; /* متن توضیحات راست‌چین */
}
/* استایل برای عنوان بالای پست‌ها (لیست پست‌ها) */
.page-title-321 {
    color: #88d498;
    font-size: 2.5rem;
    text-align: right; /* راست‌چین کردن عنوان */
    margin-bottom: 30px;
    font-weight: bold;
}
/* استایل کلی برای صفحه‌بندی */
.pagination-post-page {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

/* استایل برای هر عنصر صفحه‌بندی */
.pagination li {
    border: 1px solid #d4c9a3; /* رنگ کرم */
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s; /* انیمیشن */
}




/* Container کلی برای محتوا */
.pro-top-photo-3344 {
    display: flex;
    flex-direction: column; /* چینش عمودی: تصویر در بالا و مشخصات زیر */
    margin-bottom: 20px; /* فاصله بین پست‌ها */
}

/* Container برای مشخصات نویسنده */
.post-container-prof-35 {
    display: flex;
    justify-content: flex-start; /* فاصله بین نام نویسنده/تاریخ و پروفایل */
    align-items: center; /* هم‌تراز کردن عمودی آیتم‌ها */
    margin-top: 10px; /* فاصله بین تصویر پست و مشخصات */
    width: 100%; /* عرض کامل */
}


/* استایل تصویر پروفایل */
.profile-image-and-prof-5 {
    width: 40px; /* اندازه پروفایل */
    height: 40px;
    border-radius: 50%; /* دایره‌ای کردن تصویر */
    margin-left: 10px; /* فاصله بین تصویر پروفایل و متن */
    object-fit: cover;
}

/* استایل برای بخش نام نویسنده و تاریخ انتشار */
.post-header21-600 {
    display: flex;                  /* استفاده از Flexbox برای چینش */
    flex-direction: row;           /* چینش افقی نام نویسنده و تاریخ */
    align-items: center;           /* هم‌تراز کردن عمودی عناصر */
    justify-content: center;        /* تراز کردن به وسط صفحه */
    gap: 30px;
    right: 10px;

}

/* استایل برای نام نویسنده */
.post-author-876-33 {
    font-size: 14px;
    color: #F9FBE7;
    margin: 0;
    font-weight: bold;             /* نام نویسنده ضخیم‌تر باشد */
    margin-right: 38px;           /* فاصله بین نام نویسنده و تاریخ (۳۸ پیکسل) */
    margin-left: -10px;

}

/* استایل برای تاریخ انتشار */
.post-date-time-post-77 {
    font-size: 12px;
    color: #F9FBE7;
    margin: 0;
    margin-left: 10px;
}

.profile-link-post-list-1 {
    display: flex; /* استفاده از فلکس برای تراز کردن محتوا */
    justify-content: flex-end; /* تراز کردن به سمت راست */
    align-items: center; /* تراز کردن عمودی */
    width: 100%; /* عرض کامل برای چسباندن به سمت راست */
    margin: 0; /* حذف فاصله از بالا و پایین */
    padding: 0; /* حذف پدینگ */
    margin-right: -250px;
    text-decoration: none; /* حذف خط زیرین لینک */
}

.profile-image-and-prof-5-22 {
    float: right; /* قرار دادن تصویر در سمت راست صفحه */
    width: 30px; /* عرض تصویر */
    height: 30px; /* ارتفاع تصویر */
    border-radius: 50%; /* گرد کردن تصویر برای نمایش دایره‌ای */
    object-fit: cover; /* حفظ تناسب تصویر داخل دایره */
    background-color: #212121;
    text-align: center;

    /* فواصل اطراف */
    margin-top: 10px; /* فاصله از بالا */
    margin-bottom: 10px; /* فاصله از پایین */
    margin-left: 10px; /* فاصله از چپ */
    margin-right: 10px; /* فاصله از راست */
}
.profile-image-and-prof-5-2035 {

    float: right; /* قرار دادن تصویر در سمت راست صفحه */
    width: 30px; /* عرض تصویر */
    height: 30px; /* ارتفاع تصویر */
    border-radius: 50%; /* گرد کردن تصویر برای نمایش دایره‌ای */
    object-fit: cover; /* حفظ تناسب تصویر داخل دایره */
    background-color: #455A64;
    text-align: center;
    font-size: 20px;
    color: #F9FBE7;
    /* فواصل اطراف */
    margin-top: 10px; /* فاصله از بالا */
    margin-bottom: 10px; /* فاصله از پایین */
    margin-left: 10px; /* فاصله از چپ */
    margin-right: 10px; /* فاصله از راست */
}
.default-profile-picture {
    width: 30px; /* عرض دایره حروف اول */
    height: 30px; /* ارتفاع دایره حروف اول */
    background-color: #b9dfbf; /* رنگ پس‌زمینه دایره */
    color: #fff; /* رنگ حروف */
    display: flex; /* استفاده از فلکس برای مرکز کردن متن */
    align-items: center; /* مرکز کردن عمودی */
    justify-content: center; /* مرکز کردن افقی */
    font-size: 16px; /* اندازه فونت حروف اول */
    font-weight: bold; /* ضخامت فونت */
    border-radius: 50%; /* گرد کردن دایره حروف اول */
}




/* استایل برای لینک‌های صفحه‌بندی */
.pagination li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #3b8a3e; /* رنگ سبز کمرنگ */
    background-color: #f9f5eb; /* رنگ کرم */
    border-radius: 5px;
    font-weight: bold;
}

/* استایل برای حالت hover */
.pagination li:hover {
    background-color: #d4f0c3; /* سبز روشن */
    transform: translateY(-2px); /* انیمیشن جابه‌جایی */
}

/* استایل برای شماره صفحه فعال */
.pagination li.active {
    background-color: #3b8a3e; /* رنگ سبز پرنگ */
    color: #fff; /* رنگ متن سفید */
}

/* استایل برای صفحات قبلی و بعدی */
.pagination li a {
    font-size: 14px;
}

/* استایل برای صفحه‌بندی با جزییات بیشتر */
.pagination li a:focus, .pagination li a:active {
    outline: none; /* حذف outline */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* سایه */
}
/* استایل ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .container-posts-lis {
        flex-direction: column;
    }

    .sidebar-list, .post-list-1 {
        width: 100%;
    }

    .post-item-3 {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-images-211 {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .post-title-21, .post-description-131 {
        text-align: left;
    }

    .page-title-321 {
        text-align: center;
    }
}
                                                    /* استایل های مربوط به لیست پست  تمام شد*/

/* استایل های مربوط به ثبتنام*/
/* تنظیم پس‌زمینه سبز پررنگ برای کل صفحه */
.register-container-login-blog {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #004d40; /* سبز پررنگ عمیق */
  padding: 20px;
  box-sizing: border-box;
}

/* جعبه فرم با پس‌زمینه کرم ملایم */
.form-box-log-post {
  background-color: #fff8e1; /* زرد مایل به کرم */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* سایه برای ایجاد جلوه‌ی برجستگی */
  text-align: center;
  animation: fadeIn 1.5s ease-in-out;
  width: 100%;
  max-width: 400px;
}

/* استایل عنوان و متن */
h1.Registration-blog {
  color: #333; /* رنگ خنثی برای متن */
  margin-bottom: 10px;
}

p.Registration-matn {
  color: #555; /* رنگ کمی ملایم‌تر برای متن */
}

/* استایل ورودی‌ها */
.register-form-blog21 input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 2px solid #32c48d;
  border-radius: 5px;
  transition: border-color 0.3s;
}

.register-form-blog21 input:focus {
  border-color: #28a745;
  outline: none;
}

/* استایل دکمه ثبت‌نام */
.submit-btn-registers {
  background-color: #32c48d;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.submit-btn-registers:hover {
  background-color: #28a745;
}

.submit-btn-registers:active {
  transform: scale(0.98);
}

/* انیمیشن‌ها */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(50, 196, 141, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(50, 196, 141, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(50, 196, 141, 0);
  }
}

.submit-btn-registers {
  animation: buttonPulse 2s infinite;
}

/* تنظیمات برای موبایل */
@media (max-width: 768px) {
  .form-box-log-post {
    width: 100%;
    max-width: 90%;
  }
}
                                                    /* استایل های مربوط به ثبتنام  تمام شد*/

/* استایل های مربوط به ثبتنام موفق*/

/* پس‌زمینه کلی با انیمیشن ملایم ستاره‌ها */
.stars-background-register {
    position: relative;
    height: 100vh;
    background: linear-gradient(135deg, #4caf50, #2c7a2c); /* پس‌زمینه اصلی */
    overflow: hidden;
}

/* انیمیشن ملایم ستاره‌ها */
.stars-background-register::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 2%, transparent 50%);
    background-size: 100px 100px;
    animation: moveStars 60s linear infinite; /* انیمیشن ستاره‌ها بسیار ملایم‌تر شده */
    opacity: 0.2; /* کاهش شفافیت */
}

@keyframes moveStars {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-20%, -20%);
    }
}

/* باکس وسط صفحه با پس‌زمینه تغییر یافته */
.register-done-container-blog-22 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.register-done-box-121 {
    width:500px;
    height:400px;
    background:#FFCDD2; /* گرادیانت رنگی */
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: boxFadeIn 1.5s ease-out;
    position: relative;
}

/* انیمیشن برای باکس */
@keyframes boxFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* تیک انیمیشن و مرکز قرار گرفتن آن */
.checkmark-container-bak {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* فاصله از متن‌های زیرین */
}
.checkmark-register-2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 8px solid #32c48d;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: checkmarkGrow 1s ease forwards, checkmarkPulse 2s ease-in-out infinite; /* انیمیشن پالس رفت و برگشت */
}

.checkmark-register-2::after {
    content: "";
    width: 0;
    height: 0;
    border: solid #32c48d;
    border-width: 0 8px 8px 0;
    position: absolute;
    top: 10px;
    left: 30%;
    transform: rotate(45deg);
    animation: checkmarkDraw 1s ease forwards, checkmarkBounce 2s ease-in-out infinite; /* انیمیشن رفت و برگشت تیک */
}

/* انیمیشن رسم تیک */
@keyframes checkmarkDraw {
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 40px;
        height: 80px;
    }
}

/* انیمیشن رفت و برگشتی تیک */
@keyframes checkmarkBounce {
    0%, 100% {
        transform: translateY(0) rotate(45deg);
    }
    50% {
        transform: translateY(-10px) rotate(45deg); /* تیک کمی به بالا حرکت می‌کند */
    }
}

/* انیمیشن پالس برای دایره */
@keyframes checkmarkPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); /* دایره کمی بزرگ و کوچک می‌شود */
    }
}
@keyframes checkmarkGrow {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes checkmarkDraw {
    0% {
        width: 0;
        height: 0;
    }
    100% {
        width: 35px; /* عرض نهایی تیک */
        height: 70px; /* ارتفاع نهایی تیک */
    }
}

/* انیمیشن ستاره‌ها زمانی که تیک فعال است */
.checkmark-register-2.active {
    background: transparent; /* پاک کردن پس‌زمینه دایره */
    animation: starEffect 1.5s forwards; /* انیمیشن ستاره */
}

@keyframes starEffect {
    0% {
        background: rgba(255, 255, 255, 0);
    }
    100% {
        background: rgba(255, 255, 255, 0.7);
    }
}

.register-done-title-43 {
    font-size: 2rem;
    font-weight: bold;
    color: #651FFF;
    opacity: 0;
    animation: fadeIn 2s ease forwards, textAnimation 3s steps(30) 1s forwards; /* انیمیشن نمایش حروف */

}

/* انیمیشن برای نمایش تدریجی */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* انیمیشن نمایش حروف */
@keyframes textAnimation {
    0% { width: 0; }
    100% { width: 100%; }
}

.register-done-messages-2233 {
    font-size: 1.5rem;
    color: #7986CB;
    text-align: center;
    opacity: 0;
    animation: fadeInMessage 2s ease forwards;

}

/* انیمیشن برای پیام موفقیت */
@keyframes fadeInMessage {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* دکمه ورود */
.login-btn-980 {
    display: inline-block;
    padding: 15px 35px;
    background-color: #32c48d;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    animation: buttonBounce 2s ease-in-out infinite;
    margin-top: 40px;
}

.login-btn-980:hover {
    background-color: #28a745;
}

@keyframes buttonBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
/* استایل های مربوط به ثبتنام موفق تمام شد*/

                                                        /* استایل های مربوط به رسیت پسورد*/

.container-reset-pas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل صفحه */
    background-color: #a8d5ba; /* پس‌زمینه سبز ملایم */
}

.reset-box-pass {
    background: rgba(255, 255, 255, 0.2); /* پس‌زمینه شفاف با کمی رنگ سفید */
    padding: 3rem; /* بزرگتر کردن کادر */
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* سایه قوی‌تر */
    text-align: center;
    max-width: 500px; /* بزرگتر شدن کادر */
    width: 90%; /* عرض 90% از کادر */
    animation: fadeIn 1.5s ease-in-out;
}

h1.animate-heading-password-56 {
    font-size: 2.5rem; /* بزرگتر شدن عنوان */
    margin-bottom: 1rem;
    color: #2e7d32; /* رنگ سبز تیره برای عنوان */
    animation: slideDown 1s ease-in-out;
}

p.animate-text-matn-45 {
    margin-bottom: 1.5rem;
    color: #2e7d32; /* رنگ سبز تیره برای متن */
    animation: fadeInText 2s ease-in-out;
}

.animate-form-passw-43 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid #2e7d32; /* حاشیه سبز تیره */
    border-radius: 5px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease; /* انیمیشن تغییر رنگ حاشیه */
}

input[type="email"]:focus {
    border-color: #388e3c; /* رنگ حاشیه هنگام فوکوس */
    box-shadow: 0 0 5px rgba(56, 142, 60, 0.5); /* سایه اطراف فیلد هنگام فوکوس */
}

.submit-btn-reset-15 {
    background: linear-gradient(to right, #4caf50, #388e3c); /* گرادیان سبز دکمه */
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.submit-btn-reset-15:hover {
    background: linear-gradient(to right, #388e3c, #4caf50); /* تغییر رنگ دکمه هنگام هاور */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInText {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* استایل های مربوط به رسیت پسورد تمام شد*/


/* استایل های مربوط به تاید رسیت پسورد *                                                    /

.container-reset-confirm-next {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل صفحه */
    background-color: #e8f5e9; /* رنگ پس‌زمینه سبز ملایم */
    overflow: hidden; /* جلوگیری از اسکرول */
}

.confirm-box-pass {
    background: rgba(255, 255, 255, 0.9); /* پس‌زمینه روشن با شفافیت */
    padding: 3rem; /* فضای داخلی بیشتر */
    border-radius: 20px; /* گوشه‌های گرد بیشتر */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); /* سایه ملایم و عمیق */
    text-align: center;
    max-width: 500px; /* حداکثر عرض کادر */
    width: 90%; /* عرض 90% از کادر */
    animation: slideIn 1s ease-in-out, pulse 1.5s infinite; /* انیمیشن ورود و پالس */
}

/* انیمیشن ورود */
@keyframes slideIn {
    from {
        transform: translateY(-50px); /* حرکت از بالا */
        opacity: 0; /* محو شدن */
    }
    to {
        transform: translateY(0); /* به حالت نرمال */
        opacity: 1; /* نمایان شدن */
    }
}

/* انیمیشن پالس */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02); /* بزرگ شدن */
    }
}

.confirm-title-reset-passw {
    font-size: 2.8rem; /* بزرگتر شدن عنوان */
    margin-bottom: 1.2rem;
    color: #4caf50; /* رنگ سبز زنده */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* سایه متن */
    transition: transform 0.3s ease; /* انیمیشن تعامل */
}

.confirm-title-reset-passw:hover {
    transform: translateY(-5px); /* حرکت به سمت بالا هنگام هاور */
}

.confirm-message-mtn-39 {
    color: #555; /* رنگ متن برای خوانایی */
    line-height: 1.6; /* فاصله بین خطوط */
    font-size: 1.2rem; /* سایز متن */
    transition: color 0.3s ease; /* انیمیشن تعامل */
}

.confirm-message-mtn-39:hover {
    color: #388e3c; /* تغییر رنگ متن هنگام هاور */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* سایه متن هنگام هاور */
}
/* استایل های مربوط به تاید رسیت پسورد تمام شد*/


                                                     /* استایل های مربوط به ارسال پسوردو یوزر */
.password-reset-notification {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل صفحه */
    background: linear-gradient(135deg, #e1f5fe, #b2ebf2); /* پس‌زمینه گرادیان آبی */
    padding: 2rem; /* فضای داخلی */
    border-radius: 20px; /* گوشه‌های گرد */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* سایه ملایم */
    text-align: center; /* تراز متن */
    animation: fadeIn 0.5s ease; /* انیمیشن ورود */
}

.notification-title {
    font-size: 2.5rem; /* سایز بزرگ عنوان */
    color: #00796b; /* رنگ سبز تیره */
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* سایه متن */
    animation: slideIn 0.5s ease; /* انیمیشن ورود */
}

.user-info {
    background: rgba(255, 255, 255, 0.9); /* پس‌زمینه سفید با شفافیت */
    padding: 1.5rem;
    border-radius: 10px; /* گوشه‌های گرد */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    margin-bottom: 1rem;
    animation: fadeInUp 0.5s ease; /* انیمیشن ورود */
}

.email, .username {
    font-size: 1.3rem; /* سایز متن */
    color: #424242; /* رنگ متن */
    margin: 0.5rem 0; /* حاشیه عمودی */
}

.alert-message {
    color: #f44336; /* رنگ قرمز برای هشدار */
    font-size: 1.1rem; /* سایز متن */
    margin-bottom: 1rem;
    animation: fadeIn 0.5s ease; /* انیمیشن ورود */
}

.reset-link {
    padding: 0.7rem 1.5rem; /* فضای داخلی */
    background-color: #4caf50; /* رنگ سبز */
    color: #fff; /* رنگ متن سفید */
    text-decoration: none; /* حذف زیرخط */
    border-radius: 5px; /* گوشه‌های گرد */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* سایه دکمه */
}

.reset-link:hover {
    background-color: #388e3c; /* رنگ سبز تیره‌تر در هاور */
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0; /* محو شدن */
    }
    to {
        opacity: 1; /* نمایان شدن */
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px); /* حرکت از بالا */
        opacity: 0; /* محو شدن */
    }
    to {
        transform: translateY(0); /* به حالت نرمال */
        opacity: 1; /* نمایان شدن */
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0; /* محو شدن */
        transform: translateY(20px); /* حرکت به سمت پایین */
    }
    to {
        opacity: 1; /* نمایان شدن */
        transform: translateY(0); /* به حالت نرمال */
    }
}
/* استایل های مربوط به ارسال پسوردو یوزر تمام شد*/

/* استایل های مربوط به رسیت پسورد1*/
.reset-password-container-645 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل صفحه */
    background: linear-gradient(135deg, #e8f5e9, #b2dfdb); /* پس‌زمینه گرادیان سبز روشن */
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    text-align: center;
    animation: fadeIn 0.5s ease; /* انیمیشن ورود */
}

.reset-password-title-814 {
    font-size: 2.8rem; /* عنوان بزرگتر */
    color: #004d40; /* رنگ سبز تیره‌تر */
    margin-bottom: 1.2rem;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); /* سایه نرم */
    animation: slideIn 0.5s ease;
}

.reset-password-instruction-746 {
    font-size: 1.4rem;
    color: #424242;
    margin-bottom: 2rem; /* فاصله بیشتر از متن */
    line-height: 1.6; /* ارتفاع خط بهبود یافته */
}

.reset-password-form-925 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.95); /* پس‌زمینه فرم سفید با شفافیت کم */
    padding: 2.5rem 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s ease;
    width: 100%;
    max-width: 400px; /* حداکثر عرض فرم */
}

.reset-password-form-925 input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1.2rem;
    border: 2px solid #b2dfdb;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: border-color 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.reset-password-form-925 input[type="password"]:focus {
    border-color: #00796b; /* تغییر رنگ حاشیه هنگام فوکوس */
    box-shadow: 0 0 8px rgba(0, 121, 107, 0.5); /* سایه جذاب هنگام فوکوس */
}

.submit-btn-reset-841 {
    width: 100%;
    padding: 0.9rem;
    background-color: #388e3c;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.submit-btn-reset-841:hover {
    background-color: #2e7d32;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.invalid-link-message-matn-45 {
    color: #d32f2f; /* رنگ قرمز برای هشدار */
    font-size: 1.2rem;
    margin-top: 1.5rem;
    animation: fadeIn 0.5s ease;
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* استایل های مربوط به رسیت پسورد تمام شد1*/

/* استایل های مربوط به رسیت پسورد2*                                       /
.reset-password-success-container-590 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کامل صفحه */
    background: linear-gradient(135deg, #e0f7fa, #a7ffeb); /* گرادیان آبی سبز روشن */
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* سایه برای ایجاد جلوه سه‌بعدی */
    animation: fadeIn 0.7s ease; /* انیمیشن ورود نرم */
}

.reset-password-title-439 {
    font-size: 3rem;
    font-weight: bold;
    color: #2e7d32; /* سبز تیره برای عنوان */
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* سایه متن */
    animation: slideInDown 0.7s ease; /* انیمیشن ورود عنوان از بالا */
}

.reset-password-message-313 {
    font-size: 1.5rem;
    color: #424242; /* رنگ خاکستری تیره */
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease; /* انیمیشن ورود متن */
}

.login-btn-77 {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: #388e3c; /* رنگ سبز تیره برای دکمه */
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* انیمیشن هاور */
    animation: fadeInUp 0.9s ease;
}

.login-btn-77:hover {
    background-color: #2e7d32; /* تغییر رنگ در هاور */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* سایه بیشتر در هاور */
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
                                                            /* استایل های مربوط به رسیت پسورد تمام شد2*/

/* استایل های مربوط به صقحه موفقیت امیز پسورد* /    / / / / / / / / / / / / / / / /
/* استایل اصلی کانتینر */
.password-change-success-container-96 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ارتفاع کل صفحه */
    background: linear-gradient(135deg, #e0f7fa, #a7ffeb); /* گرادیان آبی روشن به سبز */
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* سایه ملایم برای جذابیت */
    animation: fadeIn 0.7s ease; /* انیمیشن نرم ورود */
}

/* استایل عنوان */
.password-change-title-65 {
    font-size: 3rem;
    font-weight: bold;
    color: #2e7d32; /* رنگ سبز تیره برای عنوان */
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* سایه ظریف متن */
    animation: slideInDown 0.7s ease; /* انیمیشن ورود از بالا */
}

/* استایل دکمه بازگشت */
.back-to-profile-btn-747 {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: #388e3c; /* رنگ سبز تیره */
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* سایه برای دکمه */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* انیمیشن hover */
    animation: fadeInUp 0.8s ease; /* انیمیشن ورود دکمه از پایین */
}

/* تغییر رنگ و سایه دکمه در حالت هاور */
.back-to-profile-btn-747:hover {
    background-color: #2e7d32; /* رنگ سبز تیره‌تر */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* سایه بیشتر در هاور */
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* استایل های مربوط به صقحه موفقیت امیز پسورد تمام شد*/

                                                            /* استایل های مربوط به صقحه موفقیت امیز پروفایل بایو کاربر*/

/* استایل برای کل پروفایل */
.profile-bio-user {
    background-color: #e0e0e0; /* رنگ تیره‌تر برای پس‌زمینه */
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* سایه */
    max-width: 500px; /* حداکثر عرض */
    margin: 40px auto; /* مرکز چین */
    padding: 30px; /* padding */
    text-align: center; /* مرکز چین متن */
    transition: transform 0.3s ease; /* انیمیشن بزرگ شدن */
}

.profile-bio-user:hover {
    transform: scale(1.02); /* بزرگ شدن هنگام hover */
}

/* عنوان پروفایل */
.profile-bio-user h1 {
    font-size: 26px; /* اندازه متن عنوان */
    color: #4caf50; /* رنگ سبز */
    margin-bottom: 20px; /* فاصله پایین */
}

/* تصویر پروفایل */
.profile-picture-photo-user {
    margin-bottom: 20px; /* فاصله پایین */
}

.profile-picture-photo-user img {
    width: 350px; /* عرض بزرگتر برای تصویر */
    height: 350px; /* ارتفاع بزرگتر برای تصویر */
    border-radius: 50%; /* گرد کردن تصویر */
    border: 4px solid #4caf50; /* حاشیه سبز */
    transition: transform 0.3s ease; /* انیمیشن بزرگ شدن */
}

.profile-picture-photo-user img:hover {
    transform: scale(1.1); /* بزرگ شدن تصویر پروفایل هنگام hover */
}

/* اطلاعات پروفایل */
.profile-info-all-20 {
    background-color: #fff; /* رنگ پس‌زمینه برای اطلاعات */
    border-radius: 10px; /* گوشه‌های گرد */
    padding: 20px; /* padding */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* سایه */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
}

/* استایل برای هر بخش اطلاعات */
.profile-info-all-20 p {
    font-size: 18px; /* اندازه متن */
    color: #333; /* رنگ متن */
    margin: 15px 0; /* فاصله بالا و پایین */
    font-family: 'Arial', sans-serif; /* فونت زیباتر */
}

.profile-info-all-20 p strong {
    color: #4caf50; /* رنگ متفاوت برای عنوان‌های اطلاعات */
}

/* دکمه بازگشت */
.back-button-to_blag-100 {
    display: inline-block; /* نمایش به صورت بلوک */
    background-color: #4caf50; /* رنگ دکمه */
    color: white; /* رنگ متن دکمه */
    padding: 10px 20px; /* padding دکمه */
    border-radius: 5px; /* گوشه‌های گرد */
    text-decoration: none; /* حذف زیر خط */
    transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
    margin-top: 20px; /* فاصله بالای دکمه */
}

.back-button-to_blag-100:hover {
    background-color: #388e3c; /* رنگ دکمه هنگام hover */
}
/* استایل های مربوط به صقحه موفقیت امیز پروفایل بایو کاربر تمام شد*/

/* استایل های مربوط به صقحه ایندکس امار پست ها */

                                                            /* استایل برای هدر آمار پست‌ها */
.post-statistics-anar {
    background-color: #a5d6a7; /* رنگ پس‌زمینه سبز پسته‌ای */
    padding: 20px; /* فاصله داخلی */
    border-radius: 10px; /* گرد کردن گوشه‌ها */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* سایه برای عمق */
    margin-bottom: 20px; /* فاصله از عنصر پایین */
    transition: transform 0.3s ease; /* انیمیشن برای تعامل */
    text-align: center;
}

/* متن‌های داخل آمار پست‌ها */
.post-statistics-anar h2 {
    text-align: center; /* وسط‌چین کردن متن */
    font-size: 26px; /* اندازه بزرگتر برای عنوان */
    color: #1b5e20; /* رنگ عنوان */
    margin-bottom: 10px; /* فاصله زیر عنوان */
}

.post-statistics-anar p {
    font-size: 18px; /* اندازه فونت برای پاراگراف‌ها */
    color: #424242; /* رنگ متن پاراگراف */
    margin: 5px 0; /* فاصله بالا و پایین پاراگراف */
    transition: color 0.3s ease; /* انیمیشن تغییر رنگ */
}

/* انیمیشن رنگ متن در هاور */
.post-statistics-anar p:hover {
    color: #66bb6a; /* تغییر رنگ به سبز روشن در هاور */
}

/* انیمیشن کلی کادر */
.post-statistics-anar:hover {
    transform: translateY(-2px); /* حرکت کمی به بالا */
}
/* استایل کادر اصلی */
.posts-container-link-11 {
    display: flex; /* استفاده از فلیکس باکس برای چینش */
    justify-content: space-between; /* فاصله بین دو کادر */
    width: 100%; /* عرض کامل */
    padding: 20px; /* فاصله داخلی */
    background-color:#A5D6A7;
}

/* استایل کادر محبوب‌ترین پست‌ها */
.popular-posts-left-2 {
    width: 630px; /* عرض کادر */
    padding: 20px; /* فاصله داخلی */
    background-color: #E8F5E9; /* رنگ پس‌زمینه */
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* سایه */
    border: 1px solid #e0e0e0; /* خط دور کادر */
    margin-right: 20px; /* فاصله از سمت راست */
}
/* کانتینر اصلی تصویر */
.made-image-2030 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* استایل تصویر اصلی */
.post-image-and-ex-photo-2020 {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.post-image-and-ex-photo-2020:hover {
  transform: scale(1.05);
}

/* استایل عنوان محبوب‌ترین پست‌ها */
.popular-posts-left-2 h2 {
    font-size: 20px; /* اندازه فونت عنوان */
    font-weight: bold; /* وزن فونت */
    margin-bottom: 15px; /* فاصله پایین عنوان */
    text-align: center;
}

/* استایل لینک‌ها در کادر محبوب‌ترین پست‌ها */
.popular-posts-left-2 a {
    display: flex; /* استفاده از فلیکس باکس */
    align-items: center; /* مرکز کردن عمودی */
    justify-content: flex-start; /* تراز به سمت چپ */
    height: 54px; /* ارتفاع ثابت */
    padding: 0 15px; /* فاصله داخلی */
    background-color: #f0f0f0; /* رنگ پس‌زمینه */
    border-radius: 10px; /* گوشه‌های گرد */
    text-decoration: none; /* حذف خط زیر */
    color: #333; /* رنگ متن */
    border: 1px solid #ddd; /* خط دور کادر */
    transition: background-color 0.3s ease; /* انیمیشن هاور */
    margin-bottom: 10px; /* فاصله بین لینک‌ها */
}

/* استایل محتوا درون لینک */
.popular-posts-left-2 a div {
    flex-grow: 1; /* گسترش محتوا */
    text-align: left; /* تراز به چپ */
}

/* استایل لینک‌ها در حالت هاور */
.popular-posts-left-2 a:hover {
    background-color: #c1e1c1; /* رنگ پس‌زمینه در هاور */
    color: #000; /* تغییر رنگ متن در هاور */
}

/* استایل کادر آخرین پست‌ها */
.latest-posts-right-1372 {
    width: 600px; /* عرض کادر */
    padding: 20px; /* فاصله داخلی */
    background-color: #f9f9f9; /* رنگ پس‌زمینه */
    border-radius: 15px; /* گوشه‌های گرد */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* سایه */
    border: 1px solid #e0e0e0; /* خط دور کادر */
}

/* استایل عنوان آخرین پست‌ها */
.latest-posts-right-1372 h2 {
    font-size: 20px; /* اندازه فونت عنوان */
    font-weight: bold; /* وزن فونت */
    margin-bottom: 15px; /* فاصله پایین عنوان */
    text-align: center;
}

/* استایل لینک‌ها در کادر آخرین پست‌ها */
.latest-posts-right-1372 a {
    display: flex; /* استفاده از فلیکس باکس */
    align-items: center; /* مرکز کردن عمودی */
    justify-content: flex-start; /* تراز به سمت چپ */
    height: 54px; /* ارتفاع ثابت */
    padding: 0 15px; /* فاصله داخلی */
    background-color: #f0f0f0; /* رنگ پس‌زمینه */
    border-radius: 10px; /* گوشه‌های گرد */
    text-decoration: none; /* حذف خط زیر */
    color: #333; /* رنگ متن */
    border: 1px solid #ddd; /* خط دور کادر */
    transition: background-color 0.3s ease; /* انیمیشن هاور */
    margin-bottom: 5px; /* فاصله بین لینک‌ها */
}

/* استایل محتوا درون لینک */
.latest-posts-right-1372 a div {
    flex-grow: 1; /* گسترش محتوا */
    text-align: left; /* تراز به چپ */
}

/* استایل لینک‌ها در حالت هاور */
.latest-posts-right-1372 a:hover {
    background-color: #c1e1c1; /* رنگ پس‌زمینه در هاور */
    color: #000; /* تغییر رنگ متن در هاور */
}

/* استایل اصلی برای کادر لینک‌ها */
.latest-posts-right-1372 {
    position: absolute;
    top: 216px;
    right: 30px; /* به طور کامل به سمت راست صفحه */
    width: 630px; /* عرض ثابت */
    padding: 20px;
    background-color: #E8F5E9;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

/* استایل متن داخل کادر */
.latest-posts-right-1372 h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.latest-posts-right-1372 p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
/* استایل والد (container) */
.post-content-16 {
    display: flex;
    justify-content: space-between; /* فاصله بین تایتل و کامنت ایجاد می‌کند */
    align-items: center; /* عمودی تراز کردن تایتل و کامنت */
    direction: rtl; /* راست‌به‌چپ کردن متن برای چیدمان درست */
}

/* استایل تایتل */
.post-content-16 h3 {
    margin: 0; /* حذف فاصله‌های اضافی */
    font-size: 18px; /* اندازه فونت عنوان */
    color: #333; /* رنگ عنوان */
}

/* استایل کامنت‌ها */
.post-comments-11 {
    margin: 0; /* حذف فاصله‌های اضافی */
    font-size: 14px; /* اندازه فونت کامنت */
    color: #777; /* رنگ کمی روشن‌تر برای کامنت‌ها */
}
/* استایل لینک والد (container) */
.post-info-date-tite-14 {
    display: flex; /* استفاده از flexbox */
    justify-content: space-between; /* فاصله بین تایتل و کامنت ایجاد می‌کند */

    padding: 10px; /* فاصله داخلی کادر */
    border: 1px solid #ddd; /* حاشیه دور کادر */
    border-radius: 8px; /* گرد کردن گوشه‌های کادر */
    background-color: #f9f9f9; /* رنگ پس‌زمینه کادر */

    text-decoration: none; /* حذف خط زیر لینک */
    color: inherit; /* رنگ متن را از والد بگیرد */
    transition: background-color 0.3s, transform 0.2s; /* افکت برای هاور */

}

/* استایل تاریخ */
.post-date-exi-15 {
    font-size: 14px; /* اندازه فونت تاریخ */
    color: #777; /* رنگ کمی روشن‌تر برای تاریخ */
    /* این خط حذف می‌شود */
}

/* استایل عنوان */
.post-title-exi-211 {
    display: flex;
    font-size: 18px; /* اندازه فونت عنوان */
    color: #333; /* رنگ عنوان */
    font-weight: bold; /* برجسته کردن عنوان */
    direction: rtl; /* راست‌به‌چپ کردن متن برای چیدمان درست */
    margin-top: -15px;
}
.text-good-post-set{
    text-align: center;
    font-size: 16px;
}
/* استایل لینک‌ها */
.link-post-exit-22 a {
    display: block;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease;
    margin-bottom: 10px; /* فاصله 5 پیکسل بین لینک‌ها */
}

.link-post-exit-22 a:hover {
    background-color: #c1e1c1;
    color: #000;
}

/* استایل ریسپانسیو برای صفحه‌های کوچک‌تر */
@media (max-width: 768px) {
    .latest-posts-right-1372 {
        width: 100%; /* در صفحه‌های کوچک‌تر، عرض به 100% تغییر می‌کند */
        position: relative; /* موقعیت دوباره تغییر می‌کند تا زیر محتوا قرار گیرد */
        right: 0; /* کادر از سمت راست دور می‌شود */
        margin-top: 20px; /* فاصله از بالای صفحه */
    }

    .link-post-exit-22 a {
        padding: 10px; /* کمی کوچک کردن لینک‌ها در صفحات کوچک */
    }
}
/* استایل های مربوط به صقحه ایندکس امار پست ها تمام شد*/

                                                            /* استایل های مربوط به صقحه سرچ */

/* استایل کلی برای ترازبندی صفحه و نتایج جستجو */
.search-wrapper-901 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* برای مرکز قرار گرفتن کل صفحه */
    background-color: #A5D6A7; /* سبز روشن برای پس زمینه صفحه */
    padding: 20px;
}

/* کادر نتایج جستجو */
.search-results-container-all-2 {
    max-width: 900px;
    width: 100%;
    background-color: #ffffff; /* سفید برای کادر نتایج */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* سایه برای زیبایی */
    font-family: 'Arial', sans-serif;
    text-align: center; /* برای ترازبندی متن در وسط */
    background-color:  #d5f5dc;
}

/* استایل عنوان نتایج جستجو */
.search-query-all-32 {
    color: #6b8e23; /* سبز پسته‌ای تیره */
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
}

/* لیست نتایج */
.results-list-all-13 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

/* کارت هر پست */
.post-item-19-all {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    text-align: left; /* ترازبندی متن به چپ */
}

.post-item-19-all:hover {
    transform: translateY(-5px); /* کمی حرکت به بالا در هاور */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); /* سایه بیشتر در هاور */
}

/* استایل عنوان پست */
.post-title-54-all {
    color: #2e8b57; /* سبز تیره برای عنوان */
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 12px;
    display: block;
}

.post-title-54-all:hover {
    color: #3cb371; /* سبز روشن‌تر در حالت هاور */
}

/* استایل توضیحات پست */
.post-description-87-all {
    color: #555555;
    font-size: 17px;
    line-height: 1.6;
    margin-top: 8px;
}

/* استایل برای حالت بدون نتیجه */
.no-results-search-55 {
    font-size: 20px;
    color: #d9534f; /* قرمز ملایم برای نمایش متن بدون نتیجه */
    text-align: center;
    padding: 20px;
    background-color: #ffe0e0;
    border-radius: 10px;
}

/* ریسپانسیو برای صفحات کوچکتر */
@media (max-width: 600px) {
    .search-results-container-all-2 {
        padding: 15px;
    }

    .post-title-54-all {
        font-size: 20px;
    }

    .post-description-87-all {
        font-size: 15px;
    }

    .search-query-all-32 {
        font-size: 22px;
    }
}
/* استایل های مربوط به صقحه سرچ تمام شد*/

/* استایل های مربوط به ثبت کامنت*/

/* استایل کلی برای وسط‌چین کردن محتوا و رنگ پس‌زمینه صفحه */
.comment-page-wrapper-980 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* تنظیم ارتفاع صفحه برای مرکزیت عمودی */
    background-color: #A5D6A7; /* پس‌زمینه سبز خیلی روشن */
    padding: 20px;
}

/* استایل برای پیام تایید ثبت کامنت */
.comment-confirmation-message-welcome-110 {
    color: #2e8b57; /* سبز تیره برای متن */
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    background-color: #e9f5ec; /* پس‌زمینه سبز پسته‌ای ملایم */
    border: 2px solid #2e8b57; /* حاشیه هم‌رنگ متن */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* سایه جذاب */
    font-family: 'Arial', sans-serif;
    max-width: 600px;
    margin: 20px auto; /* مرکزیت */
    transition: transform 0.3s ease-in-out;
}

/* افکت هاور برای پیام */
.comment-confirmation-message-welcome-110:hover {
    transform: translateY(-5px); /* کمی حرکت به بالا در هاور */
}

/* استایل برای لینک بازگشت به پست */
.back-to-post-link-back-380 {
    display: inline-block;
    text-decoration: none;
    color: #ffffff; /* متن سفید */
    background-color: #3cb371; /* سبز ملایم */
    padding: 14px 30px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
    margin-top: 20px;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* سایه نرم */
}

.back-to-post-link-back-380:hover {
    background-color: #2e8b57; /* سبز تیره‌تر در هاور */
    transform: translateY(-5px); /* حرکت کمی به بالا در حالت هاور */
}

/* ریسپانسیو برای صفحات کوچکتر */
@media (max-width: 600px) {
    .comment-confirmation-message-welcome-110 {
        font-size: 22px;
        padding: 16px;
    }

    .back-to-post-link-back-380 {
        font-size: 18px;
        padding: 12px 25px;
    }
}
/* استایل های مربوط به ثبت کامنت تمام شد*/

/* استایل های مربوط به خروج از اکانت*/

/* استایل کلی برای کل صفحه و وسط‌چین کردن محتوا */
.logout-wrapper-4501 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* کل صفحه را می‌پوشاند */
    background-color: #e6f5ec; /* سبز خیلی روشن برای پس‌زمینه */
    padding: 20px;
}

/* استایل برای پیام خروج */
.logout-message-1010 {
    color: #2e8b57; /* سبز تیره برای متن */
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    background-color: #ffffff; /* سفید برای پس‌زمینه پیام */
    border: 2px solid #2e8b57; /* حاشیه سبز */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* سایه زیبا */
    font-family: 'Arial', sans-serif;
    margin-bottom: 30px; /* فاصله از دکمه */
    max-width: 600px;
    transition: transform 0.3s ease-in-out;
}

/* افکت هاور برای پیام */
.logout-message-1010:hover {
    transform: scale(1.05); /* کمی بزرگ‌تر شدن در هاور */
}

/* استایل برای دکمه ورود مجدد */
.re-login-button-350 {
    display: inline-block;
    text-decoration: none;
    color: #ffffff; /* متن سفید */
    background-color: #2e8b57; /* سبز تیره برای دکمه */
    padding: 15px 40px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* سایه نرم */
}

/* افکت هاور برای دکمه */
.re-login-button-350:hover {
    background-color: #3cb371; /* سبز روشن‌تر در هاور */
    transform: translateY(-5px); /* کمی حرکت به بالا در حالت هاور */
}

/* ریسپانسیو برای صفحات کوچکتر */
@media (max-width: 600px) {
    .logout-message-1010 {
        font-size: 24px;
        padding: 16px;
    }

    .re-login-button-350 {
        font-size: 18px;
        padding: 12px 30px;
    }
}
/* استایل های مربوط به خروج از اکانت تمام شد*/

/* استایل های مربوط به تیکت */
.ticket-form-container-04-21 {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #e9f6e9; /* سبز پسته‌ای */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ticket-form-container-04-21 h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #3f704d; /* رنگ تیره‌تر برای عنوان */
    font-family: 'Arial', sans-serif;
}

.ticket-form-64-30 {
    display: flex;
    flex-direction: column;
}

.form-group-11-54 {
    margin-bottom: 15px;
}

.form-group-11-54 label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #2d572c; /* رنگ تیره برای متن برچسب */
}

.form-control-17-30 {
    padding: 10px;
    border: 1px solid #c2e1c2; /* رنگ مرزی روشن‌تر */
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-control-17-30:focus {
    border-color: #3f704d; /* تغییر رنگ مرز در حالت تمرکز */
    outline: none;
    box-shadow: 0 0 5px rgba(63, 112, 77, 0.5); /* سایه برای حالت تمرکز */
}

.btn-submit-25-62 {
    padding: 10px;
    background-color: #3f704d; /* رنگ دکمه */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn-submit-25-62:hover {
    background-color: #2d572c; /* رنگ دکمه در حالت هاور */
}
/* استایل های مربوط به تیکت تمام شد*/

/* استایل برای کانتینر تصاویر */
.post-images-container-8 {
    display: inline-block; /* برای تنظیم تصاویر به صورت خطی */
    margin: 10px; /* فاصله بین تصاویر */
}

/* استایل تصویر */
.post-image-9 {
    max-width: 100%; /* محدود کردن عرض تصویر به ۱۰۰% */
    cursor: pointer; /* تغییر نشانگر ماوس */
    transition: transform 0.3s ease; /* انیمیشن برای بزرگ شدن */
}

.post-image-9:hover {
    transform: scale(1.05); /* بزرگ شدن تصویر هنگام هاور */
}

/* مدال */
.modal-321 {
    display: none; /* مخفی به‌طور پیش‌فرض */
    position: fixed;
    z-index: 1000; /* لایه بالاتر */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* پس‌زمینه تیره */
    justify-content: center; /* مرکز قرار دادن محتوا */
    align-items: center; /* مرکز قرار دادن محتوا */
}

/* تصویر بزرگ‌شده در مدال */
.modal-content-15 {
    width: 60vw; /* ۸۰٪ از عرض */
    max-height: 84vh; /* ۸۰٪ از ارتفاع */
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* سایه برای تصویر */
    margin-top: 20px;
}

/* دکمه بستن مدال */
.close-342 {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}