:root {
    --text-color : #303030; 
    --text-color-01 : #17431f;
    --text-color-02 : #4B6352;
    --text-color-03: #98B88D;
    --background-color: #FFFFFF;
    --primary-color: #D2E2CD;
    --secondary-color: #15371A;
    --hover-color: #668862;
    --gray: #fcfbf9fd;
    --font-size-text: clamp(0.805vw, 14px, 0.9vw);
    --font-size-headings: clamp(0.85vw, 15px, 0.9vw);
    --font-size-btn : clamp(0.7vw, 12px, 0.9vw);
    --section-spacing: clamp(13vh, 10vw, 15vh);
    --header-menus: clamp(0.81vw, 15px, 0.93vw);
}

/* ==================== MAIN BANNER ==================== */
.hero-parallax-wrapper {
    position: relative;
    z-index: 1;
}

.main-banner {
    position: sticky; 
    top: clamp(68px, 8.9vh, 69px);
    width: 100%;
    height: 70svh;
    overflow: hidden;
    background-color: #e7e7e7; 
    z-index: 1;
}

/* استایل مشترک برای هر دو بنر */
.banner-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* در حالت پیش‌فرض (دسکتاپ و تبلت) بنر دسکتاپ نمایش داده میشه */
.desktop-media {
    display: block;
}

/* بنر موبایل در حالت پیش‌فرض مخفی است */
.mobile-media {
    display: none;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.055); 
    z-index: 2;
}

.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 0 20px;
}


@media (max-width: 1100px) {
    .main-banner {
        height: 50vh;
        margin-top: -50px;
    }
    .desktop-media {
        display: none !important;
    }
    .mobile-media {
        display: block !important;
    }
}

@media (max-width: 600px) {
    .main-banner {
        height: 50vh;
        margin-top: -40px;
    }
    
    /* سوئیچ کردن بنرها در موبایل */
    .desktop-media {
        display: none !important;
    }
    .mobile-media {
        display: block !important;
    }
}


/* =========================================
   ABOUT US SECTION STYLES
========================================= */

.about-us-section {
    position: relative;
    background-color: var(--gray);
    padding: 19vh 0 20vh; 
    z-index: 10;
}

/* --- ساختار عکس --- */
.about-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0; /* کشیده میشه تا انتهای سکشن */
    width: 18vw; /* 30 درصد عرض کل صفحه */
    z-index: 1;
    pointer-events: none; /* تا مزاحم کلیک‌ها نشه */
    
    /* کدهای جدید برای وسط‌چین کردن دقیق عکس در ارتفاع سکشن */
    display: flex;
    align-items: center; 
    justify-content: flex-start;
}

.sticky-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sticky-image img {
    --img-width: 100%;      
    --img-max-height: 75vh;
    
    width: var(--img-width);
    height: auto;
    max-height: var(--img-max-height);
    
    object-fit: contain;
    object-position: left center;
}


/* --- ساختار محتوای متنی --- */
.about-content-area {
    position: relative;
    z-index: 2; /* روی عکس باشه در صورت تداخل */
    width: 75%; /* 60 تا 70 درصد کانتینر همونطور که خواستی */
    
}

/* --- هدر بخش --- */
.about-header-title {
    display: flex;
    align-items: baseline;
    gap: 0.5vw;;
    margin-bottom: 4.2vh;
    flex-wrap: wrap;
}

.about-header-title h2 {
    font-size: clamp(1.1vw, 19px, 1.2vw);
    color: var(--text-color-03); 
    font-weight: 700;
}

.about-header-title .sub-title {
    font-size: clamp(0.85vw, 15px, 0.9vw);
    color: var(--text-color-01);
    font-weight: 600;
}

/* --- بلوک‌های متنی --- */
.about-text-blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(5vh, 17px, 7vh);
}

.text-block h3 {
    font-size: clamp(0.85vw, 15px, 0.9vw);
    color: #3a3a3a;
    margin-bottom: 15px;
    font-weight: 700;
}

.text-block p {
    font-size: var(--font-size-text);
    color: var(--text-color);
    line-height: 2.2;
    text-align: justify;
    font-weight: 400;
}


/* =========================================
   RESPONSIVE (Mobile & Tablet)
========================================= */
@media (max-width: 1024px) {
    .about-us-section {
        padding: 120px 0 180px; 
    }

    .about-content-area {
        width: 100%; /* در تبلت و موبایل عرض کامل رو بگیره */
        padding-right: 0;
    }

    .about-header-title {
        /* قرار دادن تایتل و ساب‌تایتل در یک خط (کنار هم) */
        flex-direction: row; 
        align-items: baseline;
        flex-wrap: wrap; /* اگه متن طولانی شد نشکنه بیرون */
        gap: 10px;
        margin-bottom: 30px;
    }

    .about-header-title h2,
    .about-header-title .sub-title,
    .text-block h3,
    .text-block p {
        text-align: right !important;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .about-header-title h2 {
        font-size: 20px;
    }

    .about-header-title .sub-title {
        font-size: 17px;
    }

    .text-block h3  {
        font-size: 15px;
    }

    .text-block p {
        font-size: 14px;
    }

    .about-text-blocks {
        gap: 28px
    }

    /* انتقال و چسباندن عکس به پایین کانتینر */
    .about-image-wrapper {
        width: 100%; 
        opacity: 1; /* حذف شفافیت قبلی */
        top: auto; /* رها کردن از بالا */
        bottom: 0; /* چسباندن مطلق به پایین سکشن */
        height: 350px; /* هم‌اندازه با پدینگ ایجاد شده در سکشن */
        align-items: center; /* تراز عمودی وسط برای چرخش بهتر */
        justify-content: center; /* تراز افقی از وسط */
    }
    
    .sticky-image {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center; /* تغییر به center برای اینکه بعد از چرخش وسط‌چین بمونه */
        justify-content: center;
    }

    .sticky-image img {
        --img-width: 50%; /* تنظیم سایز عکس */
        width: var(--img-width);
        max-height: 100%;
        object-fit: contain;
        /* چرخاندن عکس از حالت عمودی به افقی */
        transform: rotate(-90deg); 
        /* تغییر نقطه محور چرخش برای تنظیم بهتر در کادر در صورت نیاز */
        /* transform-origin: center center; */ 
    }
}

@media (max-width: 600px) {
    .about-us-section {
        padding: 100px 0 145px; 
    }

    div.about-content-area {
    padding: 0;
    }

    .about-header-title {
        flex-direction: row; 
        align-items: baseline;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 23px;
    }

    .about-header-title h2 {
        font-size: 20px;
    }

    .about-header-title .sub-title {
        font-size: 15px;
    }

    .text-block h3 {
        font-size: 15px !important;
        margin-bottom: 10px;
    }

    .text-block p {
        font-size: 15px !important;
    }

    .about-text-blocks {
        gap: 28px
    }
    
    .about-image-wrapper {
        display: flex; 
        height: 250px; 
    }
    
    .sticky-image img {
        --img-width: 70%; 
    }
}


/* =========================================
   LTR (English) OVERRIDES
========================================= */

/* چپ‌چین کردن تیترها و متون در حالت انگلیسی (همه‌جا اعمال می‌شود) */
html[dir="ltr"] .about-header-title h2,
html[dir="ltr"] .about-header-title .sub-title,
html[dir="ltr"] .text-block h3,
html[dir="ltr"] .text-block p {
    text-align: left !important;
}

/* تغییر جایگاه و قرینه کردن عکس فقط در دسکتاپ */
@media (min-width: 1025px) {
    html[dir="ltr"] .about-image-wrapper {
        left: auto; /* رها کردن از سمت چپ */
        right: 0; /* چسباندن به سمت راست */
        justify-content: flex-end;
    }

    html[dir="ltr"] .sticky-image {
        justify-content: flex-end;
    }

    html[dir="ltr"] .sticky-image img {
        object-position: right center; /* نقطه ثقل عکس بره سمت راست */
        transform: scaleX(-1); /* قرینه (Mirror) کردن عکس در محور افقی */
    }
}