body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    display: flex; /* استفاده از flexbox برای چیدمان دو ستونی */
    height: 100vh; /* ارتفاع کل صفحه */
    /* dir="rtl" را اینجا اضافه کنید اگر می خواهید کل صفحه از راست به چپ باشد */
    /* dir="rtl"; */
}

.scrollable-section {
    flex: 1; /* این قسمت فضای باقی مانده را اشغال می کند */
    width: 70%; /* نصف صفحه */
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* فعال کردن اسکرول عمودی در صورت نیاز */
    background-color: #fff; /* رنگ پس زمینه برای نمایش بهتر */
    order: 1; /* تعیین ترتیب نمایش در flexbox (اگر dir="rtl" نداریم) */
}

.fixed-section {
    width: 30%; /* نصف صفحه */
    background-color: lightblue; /* رنگ پس زمینه برای نمایش بهتر */
    position: relative; /* برای اینکه بتوانیم محتوای داخلش را ثابت کنیم */
    height: 100vh; /* ارتفاع کل صفحه */
    overflow: hidden; /* اگر محتوا بیشتر از ارتفاع باشد، نمایش داده نشود */
    padding: 20px; /* فاصله داخلی */
    box-sizing: border-box; /* محاسبه padding در عرض */
    display: flex; /* برای چیدمان عمودی محتوای داخل بخش ثابت */
    flex-direction: column; /* چیدمان عمودی */
    justify-content: center; /* وسط چین کردن عمودی محتوا */
    align-items: center; /* وسط چین کردن افقی محتوا */
    text-align: center; /* متن ها هم وسط چین شوند */
    order: 2; /* تعیین ترتیب نمایش در flexbox (اگر dir="rtl" نداریم) */
}

    /* اگر می خواهید کل چیدمان از راست به چپ باشد */
    /*
.container {
    display: flex;
    height: 100vh;
    flex-direction: row-reverse; /* فلکس باکس را از راست به چپ کنید */
    /* } */

    /* .scrollable-section { */
    /* order: 2; */ /* قسمت اسکرول شونده باید اول نمایش داده شود */
    /* } */

    /* .fixed-section { */
    /* order: 1; */ /* قسمت ثابت باید دوم نمایش داده شود */
    /* } */


    /* برای نمایش بهتر محتوا در قسمت ثابت */
    .fixed-section h1,
    .fixed-section p {
        color: #333;
        width: 100%; /* عرض کامل برای متن داخل بخش ثابت */
    }

    .fixed-section ul {
        list-style: none; /* حذف مارکر لیست */
        padding: 0;
        width: 100%;
    }

    .fixed-section li {
        color: #555;
        margin-bottom: 10px;
    }

/* برای نمایش بهتر محتوا در قسمت اسکرول */
.scrollable-section h1 {
    color: #333;
    margin-bottom: 20px;
}

.scrollable-section p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}