{
    direction: rtl;
    padding: 20px;

    background-color: #f9f9f9;
}
/* Document table styles */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
    background-color: white;
    overflow-x: auto;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}
th {
    background-color: #663399; /* Royal Purple */
    color: white;
}
.filter-container {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.filter-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.filter-section h3 {
    margin: 0 15px 10px 0;
    font-size: 18px;
    color: #333;
}
.filter-container label {
    margin: 0 10px 10px 0;
    font-size: 16px;
    color: #555;
}
.clear-filters {
    padding: 10px 20px;
    background-color: #FFA500; /* Orange */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.clear-filters:hover {
    background-color: #e68a00;
}
.print-button {
    padding: 10px 20px;
    background-color: #663399; /* Royal Purple */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}
.print-button:hover {
    background-color: #5a2e7c;
}
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
    padding-top: 60px; 
}
.modal-content {
    background-color: #fefefe; 
    margin: 5% auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
}
.close {
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
}
.close:hover,
.close:focus {
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
}
/* Row color coding */
/* Row color coding */
.type-هویتی { background-color: #f9f2f4; } /* Light Pink */
.type-شغلی { background-color: #e7f9f2; } /* Light Green */
.type-تمکن مالی { background-color: #f9f2f4; } /* Light Pink */
.type-بانکی { background-color: #e7f9f2; } /* Light Pink */
.type-دفترخانه‌ای { background-color: #e7f9f2; } /* Light Pink */
.type-احراز هویت{ background-color: #f9f2f4; } /* Light Pink */
.type-قرارداد خرید { background-color: #e7f9f2; } /* Light Pink */
@media (max-width: 600px) {
    .filter-container {
        flex-direction: column;
        align-items: flex-start; 
        flex-wrap: wrap;
        gap: 10px;

    }
    .filter-section {
        flex-direction: column;
    }
}
@media print {
        {
        background-color: white;
    }
    .print-button, .clear-filters {
        display: none;
    }
    table {
        width: 100%;
    }
}

/* Styles for Steps and Collapsibles */
.document-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.document-table th, .document-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: right; /* Align text to the right */
}
.document-table th {
    background-color: #007bff;
}
.document-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping for even rows */
}
.document-table tr:hover {
    background-color: #eaeaea; /* Highlight on hover */
}
.collapsible-container {
    margin-bottom: 20px; /* Add spacing between collapsible sections */
}

.description {
    position: relative;
    display: none;
    text-align: center;
    /*  color: #fff; White text color */
    font-size: 16px;
    border-radius: 10px;
    overflow: hidden; /* Ensure text and image fit within the container */
    padding-bottom: 10px; /* Add padding for collapsibles */
}
.description img {
    width: 100%; /* Ensure the image fills the container */
    height: auto;
    border-radius: 10px;
    display: block;
    filter: brightness(50%); /* Darken the image */
    object-fit: cover; /* Maintain aspect ratio while covering container */
    filter: none;
    opacity: 1;
    box-shadow: none;
}
    .no-blur-image {
    filter: none !important; /* جلوگیری از اعمال فیلتر */
    opacity: 1 !important;   /* جلوگیری از شفافیت */
}
.description p {
    font-family: 'Vazir', sans-serif;
    position: relative;
    margin: 0;
    padding: 10px;
    font-size: 16px; /* Default font size */
    z-index: 1;
    color: #000000;
    text-align: justify;
}


.description.active {
    display: block;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: right;
}
.steps {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    position: relative;
}
.step {
    width: 14%;
    text-align: center;
    position: relative;
}
.step p {
    margin-top: 10px;
    color: #000;
}
.step-circle {
    width: 50px;
    height: 50px;
    background-color: #ddd;
    border-radius: 50%;
    margin: 0 auto;
    line-height: 50px;
    font-size: 20px;
    color: #b1b1b1;
    transition: background-color 0.3s ease;
}
.step-circle.active, .step-circle:hover {
    background-color: #007bff;
    cursor: pointer;
}
.progress-bar {
    position: absolute;
    top: 30px;
    left: 7%;
    width: 86%;
    height: 5px;
    background-color: #ddd;
    z-index: -1;
}
.progress {
    height: 100%;
    background-color: #007bff;
    width: 0;
    transition: width 0.3s ease;
}
/* Collapsible Button Style */
.collapsible {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: right; /* Align text to the right */
    outline: none;
    font-size: 16px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}
/* Active/hover state for collapsible */
.collapsible:hover, .collapsible.active {
    background-color: #0056b3;
}
/* Collapsible content style */
.content {
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f1f1f1;
    border-radius: 5px;
    margin-top: 5px;
    color: #333;
    border: 1px solid #ddd;
}
/* Open state */
.content.open {
    max-height: 200px; /* Adjust based on content */
}
.content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
.content ul li {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 
    5px rgba(0, 0, 0, 0.1);
    color: #333;
    position: relative;
    padding-right: 30px; /* Space for icon */
}
.content ul li:before {
    content: '\2022'; /* Bullet symbol */
    color: #007bff;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
                /* Responsive Design */
        /* Responsive Design */
@media (max-width: 768px) {
    /* بخش‌های اصلی */
    .container, 
    .attractiveness-section, 
    .trip-section, 
    .car-section, 
    .tips-section, 
    .checklist-section {
        padding: 10px; /* فاصله داخلی استاندارد */
        margin: 10px auto; /* ایجاد فاصله مناسب از کناره‌ها */
        width: 95%; /* کاهش عرض برای بهتر شدن در موبایل */
    }

    /* تنظیمات تصاویر */
    .photo-box {
        display: flex;
        flex-wrap: wrap; /* نمایش عکس‌ها در چند خط */
        gap: 10px; /* فاصله بین عکس‌ها */
        justify-content: center; /* مرکز کردن عکس‌ها */
    }

    .photo-box img {
        width: 100%; /* عکس‌ها تمام عرض شوند */
        max-width: 300px; /* محدود کردن اندازه بزرگ‌ترین عکس */
        height: auto;
        border-radius: 8px; /* گوشه‌های نرم‌تر */
    }

    /* تیترها و متن */
    .attractiveness-section h3, 
    .attractiveness-section h4, 
    .attractiveness-section h5 {
        font-size: 1.4rem; /* تناسب فونت با موبایل */
        text-align: center; /* مرکز کردن تیترها */
        margin-bottom: 15px;
    }

    .attractiveness-section p {
        font-size: 1rem; /* اندازه متن مناسب */
        line-height: 1.6; /* افزایش فاصله خطوط */
        margin: 10px 0; /* فاصله متون */
        text-align: justify; /* تنظیم متن برای خوانایی بهتر */
        word-spacing: 0; /* فاصله بین کلمات را کاهش دهید */

    }

    /* تنظیمات هدر */
    header {
        padding: 10px 15px; /* فضای مناسب داخلی */
        background-color: #fff; /* پس‌زمینه روشن برای هدر */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* سایه ظریف */
        position: fixed; /* ثابت کردن هدر */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    header h1 {
        font-size: 1.5rem; /* اندازه استاندارد تیتر هدر */
        margin: 0;
        text-align: center; /* مرکز کردن تیتر */
    }

    header nav {
        margin-top: 10px;
    }

    header nav ul {
        display: flex;
        flex-direction: column; /* منوی موبایلی */
        gap: 10px; /* فاصله بین آیتم‌ها */
        padding: 0;
        list-style: none;
    }

    header nav ul li {
        text-align: center; /* مرکز کردن آیتم‌های منو */
    }

    header nav ul li a {
        font-size: 1rem;
        color: #333;
        text-decoration: none;
    }
}
.description p {
    font-size: 14px; /* Smaller font size on mobile */
}
.collapsible {
    font-size: 14px;
}

.content ul li {
    font-size: 14px;
}
        
@media (max-width: 768px) {
    .steps {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 20px; /* فاصله بیشتر بین گام‌ها */
        padding-bottom: 10px; /* حذف فاصله پایین */
    }

    .steps::-webkit-scrollbar {
        height: 6px;
    }

    .steps::-webkit-scrollbar-thumb {
        background: #007bff;
        border-radius: 10px;
    }

    .step-circle {
        width: 40px;
        height: 40px;
        background-color: #ddd;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        font-size: 8px;
        color: #b1b1b1;
    }

    .step-circle.active {
        background-color: #007bff;
        color: #fff;
        transform: scale(1.1);
        transition: transform 0.3s ease, background-color 0.3s ease;
    }
}
@media (max-width: 768px) {
    .step p.small-text {
        font-size: 10px; /* اندازه دلخواه فونت */
        color: #000; /* مشکی کردن متن */
    }
   .step-circle {
        color: #000; /* مشکی کردن اعداد داخل دایره‌ها */
    }

}


/* اطمینان از اینکه فقط روی عناصر داخل custom-section اعمال شود */
.custom-section .custom-title {
  color: #000 !important; /* اولویت بالا برای مشکی بودن */
  font-size: 24px; /* اندازه فونت */
  font-weight: bold; /* ضخامت */
}

.custom-section .custom-list {
  color: #000; /* مشکی بودن متن */
  font-size: 18px;
  list-style-type: none;
  padding-left: 0;
}

.custom-section .custom-list li {
  position: relative;
  margin-bottom: 10px;
  padding-right: 30px;
}

.custom-section .custom-list li::before {
  content: '\2713';
  color: #007bff;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* مدیا کوئری با اطمینان از اولویت بالا */
@media (max-width: 768px) {
  .custom-section .custom-title {
    font-size: 20px !important;
    color: #000 !important; /* مجدداً تاکید روی مشکی */
  }
}

@media (max-width: 480px) {
  .custom-section .custom-title {
    font-size: 18px !important;
    color: #000 !important;
  }
}
.page-wrapper .custom-section .custom-title {
  color: #000 !important;
}

/* استایل کانتینر اصلی */
.tabs-box {
    border: none;
    /* Removing the solid border */
    border-radius: 6px;
    /* Soft rounded corners */
    padding: 10px;
    background-color: #fff;
    /* Clean white background */
    margin-top: 40px;
    margin-bottom: 20px;
    /* Additional bottom margin */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Softer shadow for depth */
    position: relative;
    width: auto;
    /* Adjust width to fit content */
}

/* استایل تب‌ها */
.tab-container {
    position: relative;
    /* Changed from absolute to relative */
    top: 0;
    /* Align with the top of the container */
    right: 0;
    display: flex;
    border-bottom: 1px solid #ccc;
    /* Subtle border under inactive tabs */
}

.tab {
    cursor: pointer;
    padding: 12px 20px;
    /* More padding for a better touch area */
    background-color: #e0e0e0;
    /* Light grey for inactive tabs */
    margin-right: 2px;
    /* Slight gap between tabs */
    border: none;
    /* Remove borders */
    border-top-left-radius: 6px;
    /* Rounded corners for top */
    border-top-right-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    /* Larger font size for readability */
}

.tab:hover {
    background-color: #d0d0d0;
    /* Darker shade on hover */
}

.tab.active {
    background-color: #679b9b;
    /* Stylish teal for active tab */
    color: #fff;
    border-bottom: 2px solid #679b9b;
    /* No border overlap */
}

.tab-content {
    display: none;
    /* Hide all tab content by default */
    padding: 20px;
    /* More padding for content */
    border-radius: 6px;
    /* Rounded corners */
    border-top: none;
    /* Seamless top border */
    background-color: #fff;
    /* White background for content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Consistent shadow with tabs */
}

.tab-content.active {
    display: block;
    /* Show active tab content */
}

/* استایل جدول */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    /* More top margin for spacing */
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    /* More padding for table cells */
    text-align: center;
    font-weight: bold;
}


th {
    background-color: #679b9b;
    /* Teal header to match active tab */
    color: #fff;
}

table tr td.some-class {
    color: black !important;
}

.some-class {
    color: white;
    /* این مورد را تغییر دهید یا حذف کنید */
}

table tr.special-row {
    color: black !important;
    /* متن مشکی برای سطرهای خاص */
}


/* تمام ردیف‌های جدول سفید شوند */
table tr {
    background-color: white;
}

/* رنگ پس‌زمینه سلول‌های colspan خاکستری ملایم شود */
table td[colspan] {
    background-color: #f2f2f2;
}


/* استایل پاپ‌آپ */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.popup-close {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        font-size: 8px;
        /* تنظیم یکنواخت اندازه فونت */
        font-weight: normal;
        /* حذف ضخامت اضافی */
        padding: 8px;
        /* یکنواختی فضای داخلی */
        text-align: center;
        /* تراز وسط */
    }

    td[colspan] {
        font-size: 8px !important;
        /* اندازه‌ی فونت مشابه سایر سلول‌ها */
        font-weight: normal !important;
        /* ضخامت مشابه سایر سلول‌ها */
        text-align: center !important;
        /* ترازبندی یکنواخت */
    }

    th {
        font-size: 10px;
        /* هماهنگی اندازه فونت تیترها */
        font-weight: bold;
        /* تمایز تیترها */
        background-color: #679b9b;
        color: white;
    }

    tr {
        display: table-row;
    }
}


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

@media (max-width: 768px) {
    .tabs-box {
        display: flex;
        flex-direction: column;
        /* تغییر جهت به عمودی */
        margin-top: 10px;
        /* کاهش فاصله بالای تب‌ها */
        padding: 0;
        /* حذف padding اضافی */
    }

    .tab {
        font-size: 12px;
        /* کوچک کردن فونت تب‌ها */
        padding: 5px 10px;
        /* کاهش فضای داخلی تب‌ها */
        text-align: center;
        /* تراز وسط */
        margin-bottom: 5px;
        /* فاصله بین تب‌ها */
        border: 1px solid #ddd;
        /* حاشیه ساده برای ظاهر بهتر */
    }

    .tab-content {
        font-size: 10px;
        /* کوچک کردن فونت محتوای تب */
        padding: 8px;
        /* کاهش padding داخلی محتوا */
        line-height: 1.4;
        /* بهبود خوانایی در متن‌های کوچک */
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    {
    font-family: Vazir, sans-serif;
    background-color: #f4f4f4;
}

.menu {
    position: fixed;
    bottom: 10px;
    /* فاصله کادر از لبه پایین صفحه */
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    /* عرض منو */
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    /* کاهش فاصله بین آیکون‌ها */
    background-color: rgba(45, 58, 62, 0.8);
    /* شفافیت 80% */
    padding: 5px 0;
    /* پدینگ کلی */
    border-radius: 15px;
    /* گرد کردن لبه‌های منو */
    z-index: 999;
}

.item {
    text-align: center;
    color: white;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item img {
    width: 45px;
    /* عرض تصویر */
    height: 40px;
    /* ارتفاع تصویر */
    margin-bottom: 2px;
    /* فاصله بین آیکون و متن */
}

.item p {
    margin-top: 2px;
    /* فاصله بین آیکون و متن */
    margin-bottom: 2px;
    /* فاصله پایین متن */
    font-size: 12px;
    /* سایز متن */
    padding-bottom: 0;
    /* حذف فاصله بین متن و لبه پایینی منو */
}

.item:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    background-color: rgba(255, 255, 255, 0.2);
    /* تغییر رنگ پس‌زمینه در هاور */
}

.item a {
    text-decoration: none;
    color: white;
}

@media (max-width: 768px) {
    .menu {
        width: 60%;
        /* کاهش بیشتر عرض برای صفحه‌نمایش‌های کوچکتر */
    }

    .item img {
        width: 50px;
        height: 45px;
    }

    .item p {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .menu {
        width: 70%;
    }

    .item img {
        width: 40px;
        height: 35px;
    }

    .item p {
        font-size: 10px;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Vazir, sans-serif;
}

body {
    background-color: #f8f9fa;
    text-align: center;
    direction: rtl;
    /* مناسب برای زبان فارسی */
}

/* آکاردیون */
#accordion {
    background-color: #679b9b;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    font-size: 16px;
    transition: 0.4s;
    outline: none;
}

#accordion.active,
#accordion:hover {
    background-color: #007BFF;
}

/* پنل آکاردیون */
#panel {
    padding: 0 18px;
    background-color: #fff;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out;
}

/* ویدئو با نسبت ابعاد 16:9 */
.responsive-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* نسبت ابعاد 16:9 */
    overflow: hidden;
    margin-top: 20px;
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* استایل برای تصاویر بندانگشتی */
#thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    overflow-x: auto;
    padding: 10px;
}

#thumbnails img {
    width: 120px;
    height: 90px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 2px solid transparent;
}

#thumbnails img:hover {
    transform: scale(1.1);
    border: 2px solid #007BFF;
}

/* تنظیمات واکنش‌گرایی */
@media (max-width: 768px) {
    #accordion {
        font-size: 14px;
    }

    #thumbnails img {
        width: 90px;
        height: 68px;
    }
}

.custom-container {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 50px;
    background-color: #f9f9f9;
}

.custom-download-btn {
    display: inline-block;
    background-color: #FD5F00;
    /* رنگ اصلی دکمه */
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    /* بولد کردن متن داخل دکمه */
    transition: background-color 0.3s ease;
}

.custom-download-btn:hover {
    background-color: #d64e00;
    /* رنگ دکمه هنگام هاور */
}