.fluid-container {
    margin-top: 125px;
    background-color: rgb(237, 233, 228);
    text-align: center;
    padding: 120px 0;
}

.revolutionary-content {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 15px;
}

.main-subtitle {
    font-family: 'MontserratRegular', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.5;
    color: #5a5a5a;
    max-width: 900px;
    margin: 16px auto 0;
}

.fill-half-text {
    font-family: 'Minion', 'Inter', sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2px;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #5a5a5a;
    text-stroke: 1px #5a5a5a;
}

    /* لایه توپر */
    .fill-half-text::after {
        content: "About us";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: #5a5a5a;
        -webkit-text-fill-color: #5a5a5a;
        -webkit-text-stroke: 0;
        text-stroke: 0;
        clip-path: inset(0 100% 0 0);
        animation: fillHalfText 1.5s cubic-bezier(.77, 0, .18, 1) forwards;
    }


@keyframes fillHalfText {
    0% {
        clip-path: inset(0 0 0 100%);
    }

    100% {
        clip-path: inset(0 0 0 50%);
    }
}

/* استایل بخش */
.hero-image-section {
    width: 100%;
    padding: 0; /* مثل py-none کد قبلی */
    text-align: center;
    background-color: rgb(237, 233, 228); /* همان رنگ پس‌زمینه بخش‌های قبلی */
}

/* استایل عکس */
.hero-img {
    display: block;
    width: 100%;
    max-width: 1200px; /* این خط باعث ایجاد فاصله از راست و چپ می‌شود */
    height: auto;
    margin: 0 auto; /* عکس را دقیقاً در وسط صفحه قرار می‌دهد */
}

.no-mt {
    margin-top: 0 !important;
}

/* حذف فاصله ۱۲۵ پیکسلی */
.no-mt {
    margin-top: 0 !important;
}

/* تیتر را وسط‌چین می‌کند */
.align-center {
    text-align: center !important;
    margin-bottom: 50px; /* فاصله مناسب با بخش پایین */
}

/* چیدمان شبکه‌ای ۳ ستونه (درست و بدون به‌هم‌ریختگی) */
.ambition-grid {
    text-align: left;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ۳ ستون مساوی */
    gap: 30px; /* فاصله یکسان بین ستون‌ها */
}

/* استایل اعداد (01., 02., 03.) */
.heading-3 {
    font-family: 'Minion', 'Inter', serif;
    font-size: 48px;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* استایل متن پاراگراف‌ها */
.body-2 {
    font-family: 'MontserratRegular', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #5a5a5a;
}

/* تنظیمات کانتینر */
.offset-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.full-width-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

.full-img {
    display: block;
    width: 100%;
    height: auto;
}

/* حذف فاصله ۱۲۵ پیکسلی */
.no-mt {
    margin-top: 0 !important;
}

/* استایل پس‌زمینه تیره و رنگ متن */
.theme-darkstone {
    background-color: #212322;
    padding-top: 80px; /* مقدار پیش‌فرض py-default */
    padding-bottom: 80px;
}

    /* تنظیم فونت، رنگ و وسط‌چین کردن متن */
    .theme-darkstone .heading {
        font-family: 'Minion', 'Inter', serif;
        font-size: 64px; /* سایز مناسب برای h3 */
        font-weight: 400;
        line-height: 1.4;
        text-align: center;
        color: #aaa; /* رنگ روشن درخواستی */
        max-width: 900px; /* جلوگیری از پهن شدن بیش از حد */
        margin: 0 auto; /* وسط‌چین افقی */
    }


/* کلاس‌های اصلی و حذف مارجین بالا */
.no-mt {
    margin-top: 0 !important;
}

.offset-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* فاصله منفی برای ستون‌ها */
}

.flex-col {
    box-sizing: border-box;
    padding: 0 15px;
}

/* تنظیمات عرض ستون‌ها */
.col-md-4\/12 {
    width: 33.3333%;
}

.col-md-6\/12 {
    width: 50%;
}

.col-md-offset-2\/12 {
    margin-left: 16.6666%;
}

/* استایل لیست سمت چپ (برای ۱ یا ۱۰ آیتم، منعطف) */
.text-list {
    display: flex;
    flex-direction: column; /* آیتم‌ها را زیر هم می‌چیند */
    gap: 30px; /* فاصله بین آیتم‌ها */
    padding-right: 30px; /* فاصله با تصویر کناری */
}

.list-item {
    text-align: left;
}

/* استایل اعداد (01, 02) */
.list-number {
    font-family: 'Minion', 'Inter', serif;
    font-size: 32px;
    font-weight: 400;
    color: #5a5a5a;
    margin-bottom: 8px;
    line-height: 1.2;
}

/* استایل پاراگراف‌ها */
.list-desc {
    font-family: 'MontserratRegular', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: #5a5a5a;
    margin: 0;
}

/* استایل تصویر سمت راست (کشیده نمیشه و عرض رو پر میکنه) */
.image-wrapper {
    width: 100%;
    height: 100%; /* برای کشیده شدن ستون تا ارتفاع برابر */
}

.responsive-img {
    display: block;
    width: 100%; /* عرض رو کاملاً پر میکنه */
    height: auto; /* ارتفاع به صورت متناسب با عرض تنظیم میشه (کشیدگی صفر) */
    object-fit: cover; /* اگر بخوای کل فضای ستون رو پر کنه بدون کشیدگی */
}

/* توجه: اگر میخوای تصویر دقیقا کل ستون (ارتفاع و عرض) رو پر کنه و برش نخوره، 
   خط `height: 100%; object-fit: cover;` رو جایگزین `height: auto;` کن */


/* حذف مارجین بالای 125 پیکسل */
.no-mt {
    margin-top: 0 !important;
}

/* تنظیمات ردیف‌ها */
.content-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 50px; /* فاصله بین عکس و متن */
    margin-bottom: 80px; /* فاصله بین ردیف اول و دوم */
}

    .content-row:last-child {
        margin-bottom: 0;
    }

/* استایل پاراگراف‌ها (مطابق با body-2 و فونت‌های شما) */
.content-text {
    flex: 1;
    min-width: 250px;
    font-family: 'MontserratRegular', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #5a5a5a;
    padding-left: 25px;
    text-align: left;
    padding-top: 500px;
    border-left: 1px solid #5a5a5a;
    margin-left: 25px;
}

/* استایل تصاویر (بدون کشیدگی و متناسب با عرض) */
.content-image {
    flex: 1;
    min-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* اگر ارتفاع تصویر کم است، با این خط کل فضای کانتینر رو پر میکنه */
}

.button-wrapper{
    margin:30px;
}